Fehler rxjs / Subject.d.ts: Die Klasse 'Subject <T>' erweitert die Basisklasse 'Observable <T>' fälschlicherweise.

Ich habe Beispielvorlagencode aus diesem Tutorial extrahiert und im Folgenden zwei Schritte ausgeführt, um loszulegen:

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

2. npm start // fehlgeschlagen mit unten Fehler-

   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

Ich sehe, dass in der subject.d.ts Erklärung des Aufzugs wie folgt ist -

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

Und in Observable.ts ist es wie folgt definiert:

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

Hinweis: - 1. Ich bin neu in Angular2 und versuche, Dinge in den Griff zu bekommen.

2. Der Fehler kann auf inkompatible Definitionen der Hebemethode zurückzuführen sein

3. Ich habe diesen Github-Thread durchgelesen

4. Wenn ich eine andere Version von rxjs installieren muss, erklären Sie bitte, wie Sie die richtigen rxjs deinstallieren und installieren.

Edit1: Ich antworte hier möglicherweise etwas spät, erhalte aber auch nach Verwendung von Typoskript 2.3.4 oder rxjs 6 alpha immer noch den gleichen Fehler . Unten ist meine 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"
  }
}

Gemäß dieser müssen Sie Typoskript 2.3.4 aktualisieren oder rxjs 6 alpha

Gehen Sie in die Datei your package.json in Ihrem Projektupdate Typoskript oder in der rxjs-Version. Beispiel

"typescript": "2.3.4"

machen npm install

Update (29.06.2017): -

Gemäß den Kommentaren "2.4.0"funktioniert Typoskript .

Wie andere bereits betont haben, ist dieses Problem auf die in TypeScript 2.4 eingeführte strengere Typprüfung von Generika zurückzuführen. Dies stellte eine Inkonsistenz in einer RxJS-Typdefinition dar und wurde folglich in RxJS Version 5.4.2 behoben . Die ideale Lösung besteht also darin, einfach auf 5.4.2 zu aktualisieren.

Wenn Sie aus irgendeinem Grund kein Upgrade auf 5.4.2 durchführen können, sollten Sie stattdessen die Lösung von Alan Haddad verwenden, die Typdeklaration zu erweitern, um sie für Ihr eigenes Projekt zu beheben. Dh diesen Snippet zu deiner App hinzufügen:

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

Seine Lösung hinterlässt keine weiteren Nebenwirkungen und ist daher großartig. Alternativ haben vorgeschlagene Lösungen mehr Nebenwirkungen für Ihre Projekteinrichtung und sind daher weniger ideal:

• Deaktivieren Sie die strengeren generischen Prüfungen mit dem Compiler-Flag --noStrictGenericChecks . Dies macht es jedoch weniger streng für Ihre eigene App, was Sie tun können, führt jedoch möglicherweise inkonsistente Typdefinitionen ein, wie dies in dieser RxJS-Instanz der Fall war, was wiederum zu weiteren Fehlern in Ihrer App führen kann.
• Überprüfen Sie die Typen in Bibliotheken nicht, wenn das Flag --skipLibCheck auf true gesetzt ist. Dies ist auch nicht ideal, da möglicherweise keine Typfehler gemeldet werden.
• Upgrade auf RxJS 6 Alpha - Angesichts der wesentlichen Änderungen kann Ihre App auf schlecht dokumentierte Weise beschädigt werden, da sie immer noch in Alpha ist. Wenn Sie andere Abhängigkeiten wie Angular 2+ haben, ist dies möglicherweise keine wirklich unterstützte Option, da das Framework selbst jetzt oder später beschädigt wird. Was ich für ein noch schwieriger zu lösendes Problem halte.

Ein zugelassener Band-Aid-Ansatz besteht darin, Ihrer tsconfig.json-Datei Folgendes hinzuzufügen, bis die RxJS-Mitarbeiter entscheiden, was sie bei Verwendung von TypeScript 2.4.1 gegen den Fehler tun möchten:

"compilerOptions": {

    "skipLibCheck": true,

 }

Sie können das Problem vorübergehend mithilfe der Modulerweiterung umgehen

Der folgende Code hat das Problem für mich behoben. Sobald RxJS eine stabile Version hat, die dieses Problem nicht aufweist, sollte sie entfernt werden.

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

Während es vielleicht ironisch ist, dass RxJS selbst diese Technik so stark nutzt, um seine eigene Form zu beschreiben, ist sie tatsächlich allgemein auf eine Reihe von Problemen anwendbar.

Obwohl es sicherlich Grenzen und raue Kanten gibt, besteht ein Teil der Leistungsfähigkeit dieser Technik darin, dass wir sie verwenden können, um vorhandene Deklarationen zu verbessern und sie typsicherer zu machen, ohne die gesamte Datei zu verzweigen und zu pflegen.

"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", und " typescript ": "^ 2.3.4", dann funktioniert npm install und ng .

Nur ein bisschen Detail, um meine zwei Cent einzubringen.

Das Problem tritt auf, wenn wir Typescript auf die neueste Version aktualisieren , die inzwischen TypeScript 2.4.1 war ("wie wir die Upgrades lieben :) "], und wie von @ Jonnysai in seiner Antwort und dem dort bereitgestellten Link erwähnt eine ausführliche Diskussion über das Problem und seine Korrekturen.

Also, was war für mich war:
1. Ich musste Un installieren 2.4.1 Typoskript zuerst, indem Sie in der Systemsteuerung > Programme und Funktionen ...
2. Installieren, neu, Typoskript 2.4.0 , und vergewissern Sie sich , in package.jsonDatei haben Sie diese Konfiguration, wie hier in einem etwas kürzeren Detail erwähnt. Sie können herunterladen Typoskript 2.4.0 von hier , für Visual Studio 2015

Sie können die vorübergehend verwenden --noStrictGenericChecks Flag , um dies in TypeScript 2.4 zu umgehen.

Dies ist --noStrictGenericChecksin der Befehlszeile oder nur "noStrictGenericChecks": trueim "compilerOptions"Feld intsconfig.json .

Beachten Sie, dass dies bei RxJS 6 korrigiert wird.

Siehe diese ähnliche Frage: Wie kann ich diesen Fehler in RxJS 5.x in TypeScript 2.4 umgehen?

Bitte ändern Sie die folgende Subject.d.tsDatei:

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

zu:

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

Der Rückgabetyp sollte wahrscheinlich Observable<R>eher als seinObservable<T>

Behalten Sie die Option noStrictGeneric in der Datei tsconfig.config bei

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

Fügen Sie "noStrictGenericChecks": true in der Datei tsconfig.json unter dem Knoten "compilerOptions" hinzu , wie in der folgenden Abbildung gezeigt. Ich habe den gleichen Fehler festgestellt, nachdem dieser Fehler behoben wurde.

Ich habe das gleiche Problem gefunden und es gelöst, indem ich "rxjs": "5.4.1" , "typescript": "~ 2.4.0" verwendet und "noStrictGenericChecks": true in tsconfig.json hinzugefügt habe.

In RxJS 6 wird dies behoben, aber als vorübergehende Problemumgehung können Sie die noStrictGenericChecksCompileroption verwenden.

In tsconfig.json, steckte es in compilerOptionsund setzen Sie ihn auf true.

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

In der Kommandozeile ist es --noStrictGenericChecks.

Warum es passiert:

TypeScript 2.4 hat eine Änderung der Strenge, und der Betreff hebt nicht zum richtigen Observable. Die Unterschrift hätte wirklich sein sollen

(Operator: Operator) => Beobachtbar

Dies wird in RxJS 6 behoben.

Gehen Sie zur Datei Package.json und ändern Sie die folgende Konfiguration

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

Es wird klappen

Die alleinige Verwendung hat jedoch nicht geholfen, wenn der folgende Ansatz verwendet wurde: Wie komme ich um diesen Fehler "Betreff erweitert Observable falsch" in TypeScript 2.4 und RxJs 5 herum?

löste die Probleme. Dort wird auch erwähnt, dass das Problem in RxJs 6 behoben wurde. Dies ist also eher eine vorübergehende Korrektur, die mir geholfen hat, dieses großartige Beispiel (das zuvor kompiliert wurde, aber den Fehler während der Ladezeit verursachte) erfolgreich auszuführen: Angular 4-Anwendungsentwicklung mit Bootstrap 4 und TypeScript

Neuinstallation von rxjs -> npm installiere rxjs @ 6 rxjs-compatible @ 6 --save

Jetzt brauchen wir das ionisch-native Modul nicht mehr - wir brauchen nur noch @ ionic-native / core. Lauf

npm uninstall ionic-native --save

Es wird Ihr Problem lösen ..

einfach hinzufügen

"noStrictGenericChecks": true

zu Ihrer tsconfig.json

danke der Antwort von zmag und Rahul Sharma, es funktioniert! @zmag @Rahul Sharma

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

Mein Problem ist wie folgt:

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

Nehmen Sie Änderungen vor als.

Gehen Sie zur Datei Package.json und ändern Sie die folgende Konfiguration

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

Ja, das Problem war mit TypeScript 2.4.1. Ich habe dies gerade über die Systemsteuerung deinstalliert und es funktioniert für mich, da Visual Studio 2017 dies bereits hat.