Build problems are occurring in the EC2 build box, but they do not arise when building locally

I encountered the following error in my EC2 build environment, but I am unable to reproduce it on my local machine:

ERROR in node_modules/rxjs-compat/add/observable/dom/webSocket.d.ts(1,46): error TS2307: Cannot find module 'rxjs/websocket'.

In my local setup, I have tried:

  1. ng build

  2. ng build --configuration=feature

  3. ng build --prod

    dependencies: { ... }

"devDependencies": { "@angular-devkit/build-angular": "0.13.0", "@angular/cli": "^6.2.9", ... } }

I am uncertain about the cause of this issue and how to replicate it locally for better debugging. Please share your insights.

Answer №1

Be sure to distinguish between your dependencies and devDependencies. Dev dependencies are only installed locally for development purposes, while dependencies are included in the production build.

One way to address this issue is by installing rxjs with the --save flag like so: npm install rxjs rxjs-compat --save

Another solution can be found at: https://github.com/stbui/angular-material-app/issues/39

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What could be causing the error I encounter when attempting to send JSON in a GET request?

Currently, I am utilizing Angular 10 in my project. I am attempting to send an object in a GET request, so I decided to convert it to JSON: getData(dataPlan: Data): Observable<Response<InfoType[]>> { return this.client.get<Response< ...

sticky header on pinned tables in a React data grid

I have combined 3 tables together, with the middle table containing a minimum of 15 columns. This setup allows users to horizontally scroll through the additional columns conveniently. However, I am facing a challenge in implementing a sticky header featu ...

Different Angular 2 components are resolved by routes

Consider this scenario: Upon navigating to the URL /product/123, the goal is to display the ProductComponent. This is how it's currently configured: RouterModule.forRoot([ { path: 'product/:productId', ...

Mastering the integration of NestJS with Redis for microservices

Currently, I am diving into the world of nestjs microservices. I am curious, what commands are available for me to use? const pattern = { cmd: 'get' }; this.client.send<any>(pattern, data) Additionally, how do I go about retrieving data ...

Updating the status of various sections with Redux toolkit

Is it possible to update the state of a store, which consists of multiple slices, with a new state in React using Redux Toolkit? While you can revert the entire store to its initial state using extraReducers, is it also possible to change the state to som ...

Angular has surpassed the maximum call stack size, resulting in a Range Error

I am facing an issue while trying to include machine detail and a button bar in my app. Interestingly, this setup has worked perfectly fine in other parts of the application but is causing errors in the core module. Here is the error message main.ts impo ...

Creating an Angular service that checks if data is available in local storage before calling an API method can be achieved by implementing a

I am currently working on developing an Angular service that can seamlessly switch between making actual API calls and utilizing local storage within a single method invocation. component.ts this.userService.getAllUsers().subscribe(data => { conso ...

The attribute 'NameNews' is not recognized in the specified type when running ng build --prod

Definition export interface INewsModule{ IDNews:number; IDCategoery:number; NameNews:string; TopicNews:string; DateNews?:Date; ImageCaption:string; ImageName:string ; } Implementation import { Component, OnInit, Input, I ...

Angular application triggering multiple subscribe method calls upon a link click event

Here is the code for my navbar component: <li *ngFor="let item of menu"> <a *ngSwitchCase="'link'" routerLinkActive="active" [routerLink]="item.routerLink" (click)="Navigation(item.title)&q ...

What causes the lack of impact on lambda rendering speed despite integrating webpack?

Hey there, I've been working on implementing webpack for a project that involves microservices, Node.js, TypeScript, AWS, and AWS SAM. My main objectives are: Reduce the cold start time of lambda functions. Minimize security vulnerabilities by e ...

Having trouble accessing Vuex's getter property within a computed property

Can you help me troubleshoot an issue? When I call a getter inside a computed property, it is giving me the following error message: TS2339: Property 'dictionary' does not exist on type 'CreateComponentPublicInstance{}, {}, {}, {}, {}, Com ...

Transforming an object in TypeScript to another object while retaining the properties of the original type

Issue Struggling with TypeScript type casting here. Trying to convert an object of type B to type A, but without carrying over the properties from type B. Inquiry Is there a way to achieve this conversion without explicitly mentioning the otherName prop ...

Finding the precise Time zone with date-fns: A comprehensive guide

I've implemented a date pipe using the date-fns library for formatting dates. Here is the code: date.pipe.ts import { Pipe, PipeTransform } from '@angular/core'; import { format } from 'date-fns'; @Pipe({ name: 'formatDate ...

Perform a child component function in Angular

I'm working on a project with a child component as a map and a parent component as a form. The parent component has a field for writing the address, and when an address is entered, an HTTP request is triggered to find the latitude and longitude coordi ...

What steps can be taken for TypeScript to identify unsafe destructuring situations?

When working with TypeScript, it's important to prevent unsafe destructuring code that can lead to runtime errors. In the example below, trying to destructure undefined can cause a destructuring error. How can we ensure TypeScript does not compile suc ...

What is the proper way to utilize environment variables on Heroku for my Angular application?

Currently, I am facing difficulties setting up environment variables (or Config Vars in the Heroku world) such as production=true for my angular app on Heroku. I'm struggling to configure the postinstall and build scripts to make use of them effective ...

The formgroup label is currently displayed in uppercase, but I would prefer it to be in title case

In the angular template below, I have noticed that even though the labels are in titlecase, they appear in uppercase when the page is rendered. This wasn't the desired outcome so I attempted to use the titlecase pipe and enclose the label text within ...

React typescript wormhole is struggling to display content due to createPortal and useContext combination

Explore the interactive demo here. Purpose: The main objective is to have all children elements of PortalEntrance rendered beneath PortalExit. Main concept: PortalProvider provides a ref PortalExit assigns the ref to one of its child elements PortalEntr ...

Ionic 5.9.1 and Angular 12 FormControlName

Currently, I am delving into the realm of Reactive Forms with Angular 12 and Ionic 5.9.1 on my app. To my surprise, upon checking the latest documentation on the https://ionicframework.com/docs/api/input#properties Ionic website, I realized that there is n ...

Typescript struggling to comprehend the conditional rendering flow

I am facing an issue with the code snippet below: import * as React from 'react' type ComponentConfig = [true, {name: string}] | [false, null] const useComponent = (check: boolean): ComponentConfig => { if (check) { return [true, {name ...