CODEWITHSUNDEEP
angulartypescriptrxjs
Deepak S
Deepak S

Reputation: 1594

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

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 with all dependencies

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

  1. The error might be due to incompatible definitions of lift method

  2. I read through this github thread

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

Upvotes: 92

Views: 42453

Answers (19)

SageX
SageX

Reputation: 37

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"

Upvotes: 0

Rahul Sharma
Rahul Sharma

Reputation: 89

GO to Package.json file and modify the below configuration

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

It will work

Upvotes: 1

Miguel Afonso
Miguel Afonso

Reputation: 11

just add 

"noStrictGenericChecks": true

to your tsconfig.json

Upvotes: 0

Subhash Sharma
Subhash Sharma

Reputation: 9

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.

Upvotes: -3

Shubham Pandey
Shubham Pandey

Reputation: 364

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

Upvotes: 0

Yakup Ad
Yakup Ad

Reputation: 1651

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

Upvotes: 0

Akshay Bagi
Akshay Bagi

Reputation: 199

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. enter image description here

Upvotes: 4

Jigar Tanna
Jigar Tanna

Reputation: 31

Keep the noStrictGeneric option true in tsconfig.config file 

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

Upvotes: 3

KHACHORNCHIT
KHACHORNCHIT

Reputation: 2320

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.

Upvotes: 2

user8709803
user8709803

Reputation:

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>

Upvotes: 3

Suresh Mediboyina
Suresh Mediboyina

Reputation: 19

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.

Upvotes: 1

Ketan Chaudhari
Ketan Chaudhari

Reputation: 556

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

Upvotes: 9

Koslun
Koslun

Reputation: 2354

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.

Upvotes: 25

Irf
Irf

Reputation: 4617

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

enter image description here
configuration, as mentioned here in a rather shorter detail.

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

Upvotes: 8

Gil Shapir
Gil Shapir

Reputation: 139

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

Upvotes: 0

Aluan Haddad
Aluan Haddad

Reputation: 31823

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.

Upvotes: 18

Daniel Rosenwasser
Daniel Rosenwasser

Reputation: 23443

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?

Upvotes: 5

CharanRoot
CharanRoot

Reputation: 6325

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.

Upvotes: 72

IntelligenceGuidedByExperience
IntelligenceGuidedByExperience

Reputation: 1109

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,

 }

Upvotes: 24

Related Questions