How do I get around this “Subject incorrectly extends Observable” error in TypeScript 2.4 and RxJS 5.x?

Question

When I compile, I get the following compiler error in the RxJS declaration files:

node_modules/rxjs/Subject.d.ts(16,22): error TS2415: Class \'Subject

        

Answer 1

I ran into the same problem and found the following website helpful https://www.georgephillipson.com/blog/jquery/setting-up-angular-2-in-visual-studio-2017/ it had step by step instructions on setting up Angular for an MVC website explained how to fix the error that this post is referring to and also a link to GitHub with the full code.

I found it helpful so thought I would let others know

As per Zoes post, I have added more to why I think the link may be useful

The page shows how to update the RxJS to fix error, it also shows how to check if you have Node and NPM installed on your computer and explains how to add TypeScript, it then shows how to set up your cshtml file to display Angular content

Answer 2

Solution

RxJS 5.4.2 should now work perfectly with TypeScript 2.4.1. Simply upgrade to 5.4.2+ if possible.

npm install --save rxjs@^5.4.2

If not, the below solution should work.

Why it's happening

TypeScript 2.4 has a strictness change, and Subject<T> isn't lifting to the correct Observable. The signature really should have been

<R>(operator: Operator<T, R>) => Observable<R>

This will be fixed in RxJS 6.

Alternative Solution

Newer versions of RxJS will have this fixed, but as a temporary workaround, you can use the noStrictGenericChecks compiler option.

In tsconfig.json, put it in "compilerOptions" and set it to true.

{
    "compilerOptions": {
        "noStrictGenericChecks": true
    }
}

On the command line it's --noStrictGenericChecks.

Answer 3

In tsconfig.json, put it in "compilerOptions" and set it to true.

{
    "compilerOptions": true,
    "compilerOptions": {
        "noStrictGenericChecks": true
    }
}

Answer 4

Add

"noStrictGenericChecks": true

in tsconfig.json file

Answer 5

I have made the below changes in package.json file.

 "dependencies": {
    "@angular/animations": "4.1.3",
    "@angular/common": "4.4.6",
    "@angular/compiler": "4.4.6",
    "@angular/compiler-cli": "2.4.8",
    "@angular/core": "4.4.6",
    "@angular/forms": "4.4.6",
    "@angular/http": "4.4.6",
    "@angular/platform-browser": "4.4.6",
    "@angular/platform-browser-dynamic": "4.4.6",
    "@angular/platform-server": "4.4.6",
    "@angular/router": "4.4.6",
    "@ionic/storage": "2.0.0",
    "cordova-plugin-console": "1.0.5",
    "cordova-plugin-device": "1.1.4",
    "cordova-plugin-splashscreen": "~4.0.1",
    "cordova-plugin-statusbar": "2.2.1",
    "cordova-plugin-whitelist": "1.3.1",
    "ionic-angular": "2.2.0",
    "ionic-native": "2.4.1",
    "ionic-plugin-keyboard": "~2.2.1",
    "ionic-tooltips": "^2.0.0",
    "ionicons": "3.0.0",
    "rxjs": "^5.4.2",
    "sw-toolbox": "3.4.0",
    "typescript": "2.4.0",
    "zone.js": "0.7.2"
  }

Changes in rxjs and typescript version.

Answer 6

This is a mismatch issue between rxjs and typscript, using "rxjs": "5.4.2" and "typescript": "~2.3.4" works for me