o.Subject is not a constructor - Angular 10

Question

Ng serve and ng build --prod command working fine, but when I deploy the app on serve that time below error occurs:-

TypeError: o.Subject is not a constructor
at new e (vendor-esnext.js:1)
at Object.useFactory (vendor-esnext.js:1)
at Object.i [as factory] (vendor-esnext.js:1)
at Xo.hydrate (vendor-esnext.js:1)
at Xo.get (vendor-esnext.js:1)
at Jf.get (vendor-esnext.js:1)
at Object.get (vendor-esnext.js:1)
at Gn (vendor-esnext.js:1)
at Module.Sl (vendor-esnext.js:1)
at Mn.e.ɵfac [as factory] (vendor-esnext.js:1)

tsconfig.base.json

{"compilerOptions": {
"baseUrl": "",
"allowSyntheticDefaultImports": true,
"declaration": false,
"downlevelIteration": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": [
  "dom",
  "es2017"
],
"module": "esnext",
"moduleResolution": "node",
"sourceMap": true,
"target": "ESNext",
"paths": {
  "@angular/*": [
    "node_modules/@angular/*"
  ]
}},"include": [
"src/**/*.ts",
"node_modules/ng4-fittext/*.d.ts"],"exclude": [],"compileOnSave": false,}

I think you need to check the import statements for `Subject`. It must be imported like `import { Subject } from "rxjs/Subject"; `. Your project contains an import statement for `Subject` from somewhere else. — nevzatopcu, Aug 05 '20 at 11:19
With the new angular10 version, the rxjs compat is removed and thus `Subject` should be imported from `import { Subject } from 'rxjs';` (not from `rxjs/Subject`) — Poul Kruijt, Aug 05 '20 at 11:31
Great. I learned a new think about `Angular 10 & Rxjs 6`. Thanks for the correction. @PoulKruijt — nevzatopcu, Aug 05 '20 at 11:34
I have used imports as mentioned. But I am still getting the same error. Any idea? — Revathi Sekar, Sep 11 '20 at 12:49
you can reproduce same with using command `ng serve --prod` . No need to create build every time to check it. — Ambuj Khanna, May 20 '21 at 07:06

score 43 · Accepted Answer · edited Jan 23 '21 at 20:05

43

The problem will be solved in Angular 10 and later if you replace the import statement of subject as below.

Replace:

import { Subject } from "rxjs/Subject";

with:

import { Subject } from "rxjs";

edited Jan 23 '21 at 20:05

StackOverflowUser

945
12
10

answered Sep 30 '20 at 23:00

Ahmed Derbala

446
5
3

2

Same goes for import { Observable } from 'rxjs/Observable'. This should also be replaced with import { Observable } from 'rxjs' – Display name Dec 08 '20 at 10:22
did not work for me! I used `import { Subject, Observable } from 'rxjs';` – Ambuj Khanna May 20 '21 at 07:03

score 1 · Answer 2 · answered Aug 27 '21 at 14:22

1

If you come here to fix problem with angular-2-dropdown-multiselect, just update to the latest version.(actually 1.9.0).

answered Aug 27 '21 at 14:22

Rafael Lucini

589
3
14

score 0 · Answer 3 · answered Dec 29 '22 at 06:38

This error can occur due to outdated packages. If you have fixed the imports in all the project source files, then check inside the node_modules folder and find the packages which use rxjs/Subject. It will get fixed after updating those packages to their latest compatible versions.

In my case, it was due to the package aws-amplify-angular with Angular 10. Updating it and aws-amplify to the latest version solved the issue.

Tip: To find the libraries with old imports do a global search in the node_modules folder

o.Subject is not a constructor - Angular 10

3 Answers3