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 -

npm install // worked fine and created node_modules folder with all dependencies

npm start // failed with below error-

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 '<T, 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'.
  npm ERR! code ELIFECYCLE
  npm ERR! errno 2

I see that in the subject.d.ts declaration of lift is as below -

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

And in Observable.ts it is defined as below-

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

Note:- 1. I am new to Angular2 and trying to get hold of things.

The error might be due to incompatible definitions of lift method
I read through this github thread
If I need to install some different version of rxjs then please tell how to uninstall and install the correct rxjs.

Edit1: I might be a bit late in responding here but I still get the same error even after using typescript 2.3.4 or rxjs 6 alpha. Below is my package.json,

{
  "name": "angular-quickstart",
  "version": "1.0.0",
  "scripts": {
    "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
    "lite": "lite-server",
    "postinstall": "typings install",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "typings": "typings"
  },
  "license": "ISC",
  "dependencies": {
    "@angular/common": "2.0.0",
    "@angular/compiler": "2.0.0",
    "@angular/core": "2.0.0",
    "@angular/forms": "2.0.0",
    "@angular/http": "2.0.0",
    "@angular/platform-browser": "2.0.0",
    "@angular/platform-browser-dynamic": "2.0.0",
    "@angular/router": "3.0.0",
    "@angular/upgrade": "2.0.0",
    "core-js": "^2.4.1",
    "reflect-metadata": "^0.1.3",
    "rxjs": "6.0.0-alpha.0",
    "systemjs": "0.19.27",
    "zone.js": "^0.6.23",
    "angular2-in-memory-web-api": "0.0.20",
    "bootstrap": "^3.3.6"
  },
  "devDependencies": {
    "concurrently": "^2.2.0",
    "lite-server": "^2.2.2",
    "typescript": "2.3.4",
    "typings": "^1.3.2"
  }
}

A [_little_ clarification](https://stackoverflow.com/a/44869944/1042705) — Irf, Jul 04 '17 at 17:53
This seems to have been fixed in [rxjs@5.4.2](https://github.com/ReactiveX/rxjs/blob/master/CHANGELOG.md#542-2017-07-05). — , Jul 05 '17 at 11:09

CharanRoot · Answer 1 · 2017-06-29T14:38:56.437

71

As per this you need update typescript 2.3.4 or rxjs 6 alpha

go the your package.json file in your project update typescript or rxjs version. Example

"typescript": "2.3.4"

do npm install

update(06/29/2017):-

As per the comments typescript "2.4.0" working.

edited Jun 29 '17 at 14:38

answered Jun 28 '17 at 05:01

CharanRoot

6,181
2
27
45

6

`"typescript": "^2.3.4"` will match 2.4.1 and 2.4 is the version that exposes the problem with RxJS. – cartant Jun 28 '17 at 05:20
5

Replaced typescript version to "2.4.0" worked for me. – Ajhar Shaikh Jun 28 '17 at 17:51
1

I second that it has to be exactly "2.3.4" - "^2.3.4" didn't work for me. – maia Jun 28 '17 at 18:55
1

combination of `"typescript": "2.3.0"` and `"rxjs": "5.4.1"` worked for me – ericdemo07 Jun 29 '17 at 05:33
@Jonnysai sorry, I take back what I said. Project compiled, but I got a runtime error and downgraded to 2.3.4 . More here: https://stackoverflow.com/a/44556137 – Carcamano Jun 29 '17 at 15:02
Do we want something like ```"typescript": "~2.3.4"```? In case a patch-level change is released? – matt Jun 29 '17 at 20:56
if you are using nom 5 try deleting the package-lock.json and node_modules before running "npm i" – Abdulaziz Alsubaie Jul 01 '17 at 07:21
Downvoted because this answer doesn't seems to be updated with the info on the 5.4.2 rxjs version which fixes this. – Sámal Rasmussen Jul 16 '17 at 18:46

Koslun · Answer 2 · 2017-07-10T10:14:16.017

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.

score 24 · Answer 3 · answered Jun 28 '17 at 13:19

24

An admitted band-aid approach is to add the following to your tsconfig.json file until the RxJS folks decide what they want to do about the error when using TypeScript 2.4.1 :

"compilerOptions": {

    "skipLibCheck": true,

 }

answered Jun 28 '17 at 13:19

user3785010

1,029
1
10
11

Thanks for this, it worked. I tried lots of other things but I guess this error is related with wrong packages with wrong version doesn't support each other... – Sam Salim Jun 28 '17 at 13:56
2

I think its not a good idea to disable or suppress All LibCheck. – CharanRoot Jun 28 '17 at 14:31
I suggested the same thing on the [github issue](https://github.com/angular/angular/issues/17800#issuecomment-311675622) – Sean Newell Jun 28 '17 at 15:57
@Jonnysai since you down't own that code, supressing lib check is fine in the short term as you can file issues with the libraries, and then continue your own development work. You can file your own issue and link to their issue, and when their types get fixed you can take the supression off. – Sean Newell Jun 28 '17 at 16:04
7

The real solution should **not** be to `skipLibCheck`. If you're doing that, you're potentially glazing over other problems. A better solution is `noStrictGenericChecks` until RxJS gets updated. – Daniel Rosenwasser Jun 29 '17 at 16:42
`skipLibCheck` doesn't work the way you would expect, per documentation on `compilerOptions`, it skips type checking for all `*.d.ts` files, not just those under `node_modules`, which could be problematic if you have internal libraries outputting `.d.ts` files for type checking :( – benjaminz Sep 04 '18 at 19:52

Aluan Haddad · Answer 4 · 2017-07-02T00:16:15.110

18

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.

edited Jul 02 '17 at 00:16

answered Jun 28 '17 at 23:05

Aluan Haddad

29,886
8
72
84

where do you add or import this file? – Dave Jun 29 '17 at 16:32
1

add it anywhere in your project such that it will be picked up by the compiler. If you're using explicit file lists make sure it's included. Otherwise it should get picked up automatically as long as it's not above the tsconfig.json file – Aluan Haddad Jun 29 '17 at 17:57
2

I tried this, as it seemed the least disruptive thing to do. Worked fine. – Stephen Holt Jul 01 '17 at 21:12
Looks like the best temporary solution, I put this on top of my root app.module ( Angular 4) and also the CDK erros was gone – Nicollas Braga Aug 14 '17 at 12:31
I am unclear about how to add the file. The question concerns an Angular2 app. I added it the app folder that contains app.module.ts -- but still have the error. Do I need to import the module somewhere? And how would I do this? I can't "import {rxjs/Subject}". – John Pankowicz Oct 25 '17 at 11:43
1

I figured out how to add the file -- "import 'rxjs/Subject';" (without the "from" or curly braces) in app.component.ts. – John Pankowicz Oct 28 '17 at 14:57
@JohnPankowicz sorry for not responding earlier, it's very odd that you have to do that. If it was in your source directory it should be picked up automatically unless you're using an explicit file list – Aluan Haddad Oct 28 '17 at 18:32
Actually it turns out that the augmentations.ts code is not fixing the problem for me with or without the import statement. I wasn't testing it properly. I need to use the "noStrictGenericChecks" compiler option. – John Pankowicz Oct 29 '17 at 20:29
@JohnPankowicz are you sure you have the same problem? Also, rxjs is on version 5.5.2 at this point and I think they fixed the problem. Just upgrade. – Aluan Haddad Oct 29 '17 at 20:52
I have rxjs@5.5.0 installed. But I am using videogular2 which has a dependency on rxjs@5.1.0. – John Pankowicz Oct 29 '17 at 21:16
sounds like you have a different problem. – Aluan Haddad Oct 29 '17 at 22:39
The full error message I get is: ERROR in C:/GOVMEETING/ANGULARCLI/BrowserAppNew/node_modules/videogular2/node_modules/rxjs/Subject.d.ts (16,22): Class 'Subject' incorrectly extends base class 'Observable'. Types of property 'lift' are incompatible. Type '(operator: Operator) => Observable' is not assignable to type '(operator: Operator) => Observable'. Type 'Observable' is not assignable to type 'Observable'. Type 'T' is not assignable to type 'R'. – John Pankowicz Oct 29 '17 at 23:53
You said that videogular2 has a dependency on rxjs. So you have multiple versions of the library and from the error, that is the one giving you the trouble. Try to install Rxjs under "peerDepenedencies" – – Aluan Haddad Oct 30 '17 at 02:04
@AluanHaddad I am also using videogular2 and am having the same problem as John. His solution seems to be working for me. However installing Rxjs under peerDependencies did not work. I am using rxjs 5.5.2. Is there another way to do this so Im not running multiple versions of rxjs? – Jared Whipple Dec 03 '17 at 04:39
1

@JaredWhipple That is a serious issue and has implications for much more than typechecking. You can use `"paths"` in `tsconfig.json` to explicitly specify where `"rxjs"` and `"rxjs/*"` should resolve for typechecking. However, having multiple versions is likely to cause runtime issues. Even if you don't use `instanceof` and other such tests, your deps may be less principled. Best thing to do is to open an issue with videogular2 suggesting changing RxJS to a peer dependency. – Aluan Haddad Dec 03 '17 at 09:18

score 9 · Answer 5 · answered Jul 20 '17 at 08:11

"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.

Irf · Answer 6 · 2017-07-04T12:45:13.433

8

Just a little bit of detail, in an attempt to put in my two cents.

The problem arises when we upgrade Typescript to the latest version, which by now was TypeScript 2.4.1, [ "as we love the upgrades : )" ], and as mentioned by @Jonnysai in his answer and the link provided there, there is a detailed discussion regarding the problem and its fixes.

So, what worked for me was:
1. I had to Uninstall TypeScript 2.4.1 first, by going to Control Panel > Programs and Features...
2. Install, afresh, TypeScript 2.4.0, and then make sure, in package.json file, you have this

configuration, as mentioned here in a rather shorter detail.

You can download TypeScript 2.4.0 from here, for Visual Studio 2015

edited Jul 04 '17 at 12:45

answered Jul 02 '17 at 10:44

Irf

4,285
3
36
49

This worked very simply with no "workarounds". I'm not sure this matters but my rxjs was "5.0.1" and I did not change that, all seems fine though. Thanks for your two cents - it helped me! – Tom A Jul 19 '17 at 22:21
I also have this problem using Typescript 2.3.4. So it seems not correct that the problem arises because of upgrading to 2.4.1. The current angular-cli installs 2.3.4 because it says that it requires <2.4.0. – John Pankowicz Oct 25 '17 at 11:22

Daniel Rosenwasser · Answer 7 · 2017-06-29T16:33:56.137

5

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?

edited Jun 29 '17 at 16:33

answered Jun 28 '17 at 18:40

Daniel Rosenwasser

21,855
13
48
61

where do you put the flag? – Dave Jun 29 '17 at 16:31

score 4 · Answer 8 · answered Dec 26 '17 at 09:32

4

Add "noStrictGenericChecks": true in tsconfig.json file under "compilerOptions" node as shown in below image & build application. I have faced same error after adding this error resolved.

answered Dec 26 '17 at 09:32

Akshay Bagi

179
1
8

score 3 · Answer 9 · edited Oct 10 '17 at 17:26

3

Please change the following line of Subject.d.ts file:

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

to:

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

The return type should probably be Observable<R> rather than Observable<T>

edited Oct 10 '17 at 17:26

Massimiliano Kraus

3,638
5
27
47

answered Oct 02 '17 at 17:22

score 3 · Answer 10 · edited Nov 13 '17 at 07:47

3

Keep the noStrictGeneric option true in tsconfig.config file

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

edited Nov 13 '17 at 07:47

Zhaoxing Lu

6,319
18
41

answered Nov 13 '17 at 07:01

Jigar Tanna

31
2

KHACHORNCHIT · Answer 11 · 2017-11-10T10:15:16.343

2

I found same problem and I solved it by using "rxjs": "5.4.1", "typescript": "~2.4.0" and adding "noStrictGenericChecks": true into tsconfig.json.

edited Nov 10 '17 at 10:15

answered Nov 10 '17 at 09:50

KHACHORNCHIT

2,222
23
19

score 1 · Answer 12 · edited Aug 26 '17 at 07:13

RxJS 6 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.

Why it's happening:

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

(operator: Operator) => Observable

This will be fixed in RxJS 6.

score 1 · Answer 13 · edited Apr 22 '19 at 07:26

1

GO to Package.json file and modify the below configuration

...
  "rxjs": "5.4.1",
  "typescript": "~2.4.0"
...

It will work

edited Apr 22 '19 at 07:26

zmag

7,825
12
32
42

answered Apr 22 '19 at 06:41

Rahul Sharma

87
1
9

Gil Shapir · Answer 14 · 2017-07-03T06:10:30.623

Using the above alone did not help, however, using the following approach: How do I get around this “Subject incorrectly extends Observable” error in TypeScript 2.4 and RxJs 5

solved the issues. It is also mentioned there that the issue has been fixed in RxJs 6, so this is more of a temporary fix, which helped me in successfully running this great example (which compiled before but gave the error during load time): Angular 4 application development with Bootstrap 4 and TypeScript

score 0 · Answer 15 · answered May 31 '18 at 08:10

0

reinstalling rxjs -> npm install rxjs@6 rxjs-compat@6 --save

answered May 31 '18 at 08:10

Yakup Ad

1,591
16
13

score 0 · Answer 16 · edited Oct 11 '18 at 09:46

0

Now we dont need the ionic-native module - we only need @ionic-native/core. Run

npm uninstall ionic-native --save

It will solve Your Problem..

edited Oct 11 '18 at 09:46

Suraj Rao

29,388
11
94
103

answered Oct 11 '18 at 09:44

Shubham Pandey

314
2
5

score 0 · Answer 17 · edited Apr 11 '19 at 14:54

0

just add

"noStrictGenericChecks": true

to your tsconfig.json

edited Apr 11 '19 at 14:54

Rodrigo Vasconcelos

1,270
2
14
26

answered Apr 11 '19 at 14:17

Miguel Afonso

11
2

score 0 · Answer 18 · edited Dec 25 '19 at 07:52

0

thanks the answer of zmag and Rahul Sharma, it works! @zmag @Rahul Sharma

  "rxjs": "5.4.1",
  "typescript": "~2.4.0"

my problem is as follow:

typings/globals/core-js/index.d.ts:3:14 - error TS2300: Duplicate identifier

Make changes as.

GO to Package.json file and modify the below configuration

  "rxjs": "5.4.1",
  "typescript": "~2.4.0"

edited Dec 25 '19 at 07:52

Reza Ghorbani

2,396
2
28
33

answered Dec 25 '19 at 05:35

SageX

37
4

score -3 · Answer 19 · edited Jan 12 '19 at 10:20

-3

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.

edited Jan 12 '19 at 10:20

Afaq Ahmed Khan

2,164
2
29
39

answered Aug 02 '17 at 12:37

Subhash Sharma

9

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

19 Answers19

Linked

Related