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<T>' incorrectly extends base class 'Observable<T>'.
  Types of property 'lift' are incompatible.
    Type '<R>(operator: Operator<T, R>) => Observable<T>' is not assignable to type '<R>(operator: Operator<T, R>) => Observable<R>'.
      Type 'Observable<T>' is not assignable to type 'Observable<R>'.
         Type 'T' is not assignable to type 'R'.

What's going on here, and how do I get around this without downgrading to TypeScript 2.3 or earlier?

Answer 1

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 2

Today, faced this error and solved this pratically with the below three steps. So sharing the same with the hope, it will help others.

Step 1: In the package.json file change the entry as "rxjs": "5.4.2",

Step 2: Delete the node_modules folder from the project,which is present in the root directory

Step 3 : Now ,Right click the package.json file and click restore like as shown below:

Note : It will again create node_module folder with the new files, Now build the solution, hopefully you should not get any build error related to above problem.

Answer 3

Add

"noStrictGenericChecks": true

in tsconfig.json file

Answer 4

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

1) changed the rxjs version to 5.4.1 in dependencies section.

"dependencies": {
"rxjs": "5.4.1" }

2) changed the typescript version to 2.4.0 in devDependencies section.

"devDependencies": { "typescript": "2.4.0" }

I ran 'npm install' command after making the two changes and it worked.

Answer 5

In your Subject class:

change this line:

lift<R>(operator: Operator<T, R>): Observable<T>;

to :

lift<R>(operator: Operator<T, R>): Observable<R>;

Answer 6

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 7

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

Answer 8

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 9

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

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