rxjs/Subject.d.ts error : Class 'Subject' incorrectly extends base class 'Observable'

Question

I extracted sample template code from this tutorial and did below two steps to get started -

1. npm install // worked fine and created node_modules folder

Answer 1

You can temporarily work around the issue by using Module Augmentation

The following code resolved the issue for me. Once RxJS has a stable release that does not exhibit this issue, it should be removed.

// augmentations.ts
import {Operator} from 'rxjs/Operator';
import {Observable} from 'rxjs/Observable';

// TODO: Remove this when a stable release of RxJS without the bug is available.
declare module 'rxjs/Subject' {
  interface Subject<T> {
    lift<R>(operator: Operator<T, R>): Observable<R>;
  }
}

While it is perhaps ironic that RxJS itself makes such heavy use of this technique to describe its own shape, it is actually generally applicable to an array of problems.

While there are certainly limits and rough edges, part of what makes this technique powerful is that we can use it to enhance existing declarations making them more type safe without forking and maintain the entire file.

Answer 2

You can temporarily use the --noStrictGenericChecks flag to get around this in TypeScript 2.4.

This is --noStrictGenericChecks on the command line, or just "noStrictGenericChecks": true in the "compilerOptions" field in tsconfig.json.

Keep in mind, RxJS 6 will have this corrected.

See this similar question: How do I get around this error in RxJS 5.x in TypeScript 2.4?

Answer 3

just add

"noStrictGenericChecks": true

to your tsconfig.json

Answer 4

yes the problem was with TypeScript 2.4.1 I just uninstalled this from Control panel and it works for me as Visual Studio 2017 already has this.

Answer 5

"dependencies": {
"@angular/animations": "^4.3.1",
"@angular/common": "^4.3.1",
"@angular/compiler": "^4.3.1",
"@angular/compiler-cli": "^4.3.1",
"@angular/core": "^4.3.1",
"@angular/forms": "^4.3.1",
"@angular/http": "^4.3.1",
"@angular/platform-browser": "^4.3.1",
"@angular/platform-browser-dynamic": "^4.3.1",
"@angular/platform-server": "^4.3.1",
"@angular/router": "^4.3.1",
"core-js": "^2.4.1",
"rxjs": "^5.4.2",
"ts-helpers": "^1.1.1",
"zone.js": "^0.7.2"
},
"devDependencies": {
"@angular/compiler-cli": "^2.3.1",
"@types/jasmine": "2.5.38",
"@types/node": "^6.0.42",
"angular-cli": "1.0.0-beta.28.3",
"codelyzer": "~2.0.0-beta.1",
"jasmine-core": "2.5.2",
"jasmine-spec-reporter": "2.5.0",
"karma": "1.2.0",
"karma-chrome-launcher": "^2.0.0",
"karma-cli": "^1.0.1",
"karma-jasmine": "^1.0.2",
"karma-remap-istanbul": "^0.2.1",
"protractor": "~4.0.13",
"ts-node": "1.2.1",
"tslint": "^4.3.0",
"typescript": "^2.3.4",
"typings": "^1.3.2"
}

in package.json "rxjs": "^5.4.2", and "typescript": "^2.3.4", then npm install and ng serve its working.

Answer 6

As others have pointed out this issue came about as a consequence of the stricter type checking of generics introduced in TypeScript 2.4. This exposed an inconsistency in a RxJS type definition and was consequently fixed in RxJS version 5.4.2. So ideal solution is to just upgrade to 5.4.2.

If you for some reason cannot upgrade to 5.4.2 you should instead use Alan Haddad's solution of augmenting the type declaration to fix it for your own project. I.e. add this snippet to your app:

// TODO: Remove this when RxJS releases a stable version with a correct declaration of `Subject`.
import { Operator } from 'rxjs/Operator';
import { Observable } from 'rxjs/Observable';

declare module 'rxjs/Subject' {
  interface Subject<T> {
    lift<R>(operator: Operator<T, R>): Observable<R>;
  }
}

His solution will leave no other side-effects and is thus great. Alternatively proposed solutions have more side-effects for your project setup and thus are less ideal:

• turn off the stricter generic checks with compiler flag --noStrictGenericChecks. This will however make it less strict for your own app, which you can do, but might introduce inconsistent type definitions like it did in this RxJS instance which in turn might introduce more bugs in your app.
• Not checking the types in libraries with flag --skipLibCheck set to true. This is not ideal either as you might not get some type errors reported.
• Upgrading to RxJS 6 Alpha - given that there are breaking changes this might break your app in badly documented ways, seeing as it's still in alpha. Additionally if you have other dependencies like Angular 2+ this might not really be a supported option, breaking the framework itself now or down the line. Which I think is an even harder issue to solve.