Angular 10 encountering an issue with subject instantiation

I am encountering an issue with my Angular application. Everything runs smoothly with `ng serve`, and the application builds correctly using `ng build --prod`. However, when I attempt to run the generated sources in the browser, an error occurs:

TypeError: $m.Subject is not a constructor
    at new e (error-handling.service.ts:8)
    ... (additional error stack trace here)

The code snippet from `error-handling.service.ts` causing this error is as follows:

import { Injectable } from "@angular/core";
import { Subject } from "rxjs/Subject";

@Injectable({
  providedIn: "root",
})
export class ErrorHandlingService {
  private errors: Subject<string[]> = new Subject(); // <-- error in this line

  constructor() {}

  public addErrors = (errors: string[]): void => this.errors.next(errors);

  public getErrors = () => this.errors.asObservable();
}

This code used to work fine on Angular 9, but after upgrading to version 10 (which also updated TypeScript), it stopped working. It's puzzling why it functions with `ng serve` but fails in production. Additionally, it's strange that this error isn't caught during compilation.

I have disabled Ivy for my project.

Answer №1

Your problem lies in the import statement. The Subject class needs to be imported from the rxjs library.

import { Subject } from "rxjs";

In the past, there was a module called rxjs-compat that provided backward compatibility for situations like this. However, it seems that support for this has been dropped starting from rxjs version 5. If you are now using rxjs version 7, it's likely that they have removed this compatibility layer altogether.

For more information, you can refer to this link. As indicated there, make sure to import Subject directly from rxjs. If your linting tools are giving you warnings about this, it might be time to update their configurations as rxjs version 6 has been out for over 2 years now.

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

Struggling with transitioning from TypeScript to React when implementing react-data-grid 7.0.0

I'm trying to add drag and drop functionality to my React project using react-data-grid, but I keep encountering a "TypeError: Object(...) is not a function" error. I have a TypeScript version of the file in the sandbox as a reference, but when I try ...

Limiting the number of characters in a textarea using React with TypeScript

Having encountered two issues, I've developed a textarea component that not only allows users to input text but also keeps track of the number of characters they have typed. First Issue: I'm attempting to check if the length of the current input ...

The header remains unchanged even after verifying the user's login status

Currently, I am using Angular 11 for the front-end and Express for the back-end. I am facing an issue with determining if a user is logged in so that I can display the correct header. Even after logging in and setting a cookie in the browser upon redirecti ...

Ways to enhance focus on childNodes using Javascript

I am currently working on implementing a navigation system using a UL HTML Element. Here's the code I have so far: let htmlUL = <HTMLElement>document.getElementById('autocomplete_ul_' + this.name); if (arg.keyCode == 40) { // down a ...

How to stop a method in Angular2 when a specific response is received?

I've been grappling with the idea of unsubscribing from a method in Angular2 once it receives a specific response. settings.component.ts Within my component, the method in question is connectToBridge, where the value of this.selectedBridge is a stri ...

The shop named 'someStore' is currently unavailable! Please ensure that it is being offered by a valid Provider

I'm having trouble setting up a new project using React, Typescript, and MobX. Despite having a relatively simple piece of code, I can't seem to get MobX to work properly. It keeps showing me this error message: Uncaught Error: MobX injector: S ...

Troubleshooting Shader Loading Issues in an Angular Application Utilizing Three.js

Check out this component: https://www.npmjs.com/package/app3d-three-template Here's the Plnkr link: https://plnkr.co/edit/bdkshJFzhwmLNdgO?preview The issue I'm facing is related to the fire Shader not displaying the correct color. Additionally ...

Properly specifying the data type for a generic type variable within a function in TypeScript

As I work on my express project, I am currently coding a function called route. const morph = (params: Function[]) => (req: Request) => params.map(f => f(req)) const applyTransformers = (transformers: Function[]) => (response: any) => { ...

Enhancing the 'UserDetails' model in ASP.NET Angular project (dotnet core 3.0) to accommodate additional user information

Currently working on an ASP.NET Web application with Angular as the front end, using the new template in VisualStudio 2019 for ASP.NET angular with Individual Authentication. This project runs on dotnet core 3.0 Preview 4. https://i.stack.imgur.com/RUKdg. ...

Implementing routing for page navigation within an angular tree structure

Can someone assist me with integrating a route into an angular tree structure? Here is the HTML code snippet: <mat-tree [dataSource]="dataSource" class="tree-container" [treeControl]="treeControl"> <mat-tree-node class="btnLinks" *matTreeN ...

`Angular application having trouble loading Azure Maps`

Hey there! I'm currently working on integrating Azure Maps into a basic Angular application. The error message I encountered is shown below. Any insights on why this might be happening and what steps can be taken to resolve it? atlas.min.js:2509 Err ...

When invoking the function, the original state remains unaffected within a separate function

Whenever I click on an 'item', it should establish an initial value for me to use in a comparison within another function that involves the mousemove event. However, when the mousemove function is triggered, the initial state remains at 0. imp ...

The Output() function seems to be failing to emit the event

My architecture setup is as follows: UiControlsModule |- Component 1 |- Component 2 The first module is imported and exported in SharedModule. CasesModule |- CaseListComponent |- // other components here SharedModule is also imported into CasesModule. ...

What is the best way to customize the appearance of a mat-checkbox in Angular using Angular Material?

Is there a way to customize the appearance of a mat-checkbox that actually works? I've tried various solutions without success. I attempted to disable view encapsulation and use classes like mdc-checkbox__background, but nothing changed. Even applyin ...

Sorting complex strings in Typescript based on the dates contained within them

How can I sort a list of 2 strings with dates inside them so that the earlier one always comes first? The date is always after the second comma. For example, const example = ["AAA,5,2020-09-17T21:14:09.0545516Z", "AAA,0,2020-09-03T20:38:08. ...

How can one effectively monitor the progress of multiple ajax requests in Angular8 for optimal professionalism?

There is a single completed variable made up of 6 parts, outlined below: selectedCandidateData: Candidate = { candidateBasic: null, experienceList: null, educationList: null, certificationList: null, candidateAbout: null, }; Each part ...

How to style Angular Material Dropdowns: Trimming the Left and Right Sides using CSS

Seeking to customize Angular Material Select to resemble a basic dropdown. Even after applying the disableOptionCentering, the dropdown list options still expand from the left and right sides (refer to Current picture below). The desired look would involve ...

Adding types to computed properties in Vue 3's Composition API is a seamless process

Having an issue where I am trying to add type to computed but keep encountering this error: Overload 1 of 2, '(getter: ComputedGetter<AuthFormType>, debugOptions?: DebuggerOptions | undefined): ComputedRef<AuthFormType>', gave the fol ...

Establishing the context for the input template by utilizing ng-template, ng-container, and ngTemplateOutlet

I am facing a challenge with a customizable component that utilizes an ng-container to display either a default template or a template passed in as an input. The issue arises when I try to set the context of the passed-in template to the nesting component ...

Guide on validating multiple preselected checkboxes using Angular 8 reactive forms

I have a problem with validating checkboxes in my Angular application. The checkboxes are generated dynamically from an array using ngFor loop, and I want to make sure that at least one checkbox is selected before the form can be submitted. The validatio ...