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?

Lewin

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

Then try restarting your editor and/or recompile if you don't see an immediate change.

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.

Lewin

where do i use this "--noStrictGenericChecks" ? – Saxecoburggotha

The compilerOptions in your tsconfig.json. Just remove the dashes and set it to true. – Lewin

Can you please help me on this - #44818301 . This happend when my typescript updated to 2.4.1 I think. – Saxecoburggotha

Except that my typescript 2.4.0 runtime knows nothing about the noStrictGenericChecks option.. and trying to set it causes an error.. – Cadaver

Thanks a lot for this answer. npm install --save rxjs@^5.4.2 resolves my issue. – Natator

Setting noStrictGenericChecks to true eliminated my error, but I still have warnings: node_modules/ng2-opd-popup/node_modules/@angular/core/src/linker/system_js_ng_module_factory_loader.js 69:15-36 Critical dependency: the request of a dependency is an expression. Also, when I try to run my app I get this error in the browser console: Uncaught Error: Unexpected value '[object Object]' imported by the module 'AppModule'. Please add a @NgModule annotation – Railway

--noStrictGenericChecks worked for me. Thanks a lot – Insomniac

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.

Kuwait

Fixed the issue for me. You'd think the tutorials on the official Angular website would be up-to-date with the latest versions but that does not appear to be the case. – Stand

yes you are right and happy that it fixed your problem @breez. Happy sharing..:) – Kuwait

Answer 3

Add

"noStrictGenericChecks": true

in tsconfig.json file

Frozen

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.

Lemke

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>;

Edaphic

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.

Bred

Answer 7

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

Tunicate

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

Unready

A link to a solution is welcome, but please ensure your answer is useful without it: add context around the link so your fellow users will have some idea what it is and why it’s there, then quote the most relevant part of the page you're linking to in case the target page is unavailable. Answers that are little more than a link may be deleted. – Barcelona

Answer 9

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

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

Apian