Comment puis-je contourner l'erreur "Le sujet étend incorrectement Observable" dans TypeScript 2.4 et RxJS 5.x?
Lorsque je compile, l'erreur de compilateur suivante apparaît dans les fichiers de déclaration RxJS:
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'.
Que se passe-t-il ici et comment résoudre ce problème sans passer à une version antérieure à TypeScript 2.3 ou antérieure?
Solution
RxJS 5.4.2 devrait maintenant fonctionner parfaitement avec TypeScript 2.4.1. Mettez simplement à niveau vers 5.4.2+ si possible.
npm install --save rxjs@^5.4.2
Sinon, la solution ci-dessous devrait fonctionner.
Solution alternative
Cela sera corrigé dans les versions plus récentes de RxJS, mais comme solution temporaire, vous pouvez utiliser l'option de compilation noStrictGenericChecks.
Dans tsconfig.json, mettez-le dans "compilerOptions" et définissez-le sur true.
{
"compilerOptions": {
"noStrictGenericChecks": true
}
}
Sur la ligne de commande, il s'agit de --noStrictGenericChecks.
Pourquoi ça se passe
TypeScript 2.4 a un changement de rigueur, et Subject<T> n'élève pas à la Observable correcte. La signature aurait vraiment dû être
<R>(operator: Operator<T, R>) => Observable<R>
Cela sera corrigé dans RxJS 6.
Aujourd'hui, face à cette erreur et résolu pratiquement avec les trois étapes ci-dessous. Alors, partageant la même chose avec l'espoir, cela aidera les autres.
Étape 1: Dans le fichier package.json, modifiez l'entrée comme suit: "rxjs": "5.4.2",
Étape 2: Supprimez le dossier node_modules du projet, présent dans le répertoire racine.
Étape 3: Maintenant, cliquez avec le bouton droit de la souris sur le fichier package.json et cliquez sur Restaurer comme indiqué ci-dessous: 
Remarque: Il créera à nouveau le dossier node_module avec les nouveaux fichiers. Générez maintenant la solution, espérons que vous ne devriez pas obtenir d'erreur de construction liée au problème ci-dessus.
J'ai apporté les deux modifications ci-dessous au fichier package.json.
1) a changé la version de rxjs en 5.4.1 dans la section des dépendances.
"dépendances": {
"rxjs": "5.4.1" }
2) a changé la version de TypeScript en 2.4.0 dans la section devDependencies.
"devDependencies": { "TypeScript": "2.4.0" }
J'ai exécuté la commande ' npm install ' après avoir effectué les deux modifications et cela a fonctionné.
Ajouter
"noStrictGenericChecks": true
dans le fichier tsconfig.json
J'ai apporté les modifications ci-dessous dans le fichier package.json.
"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"
}
Changements dans la version de rxjs et TypeScript.
Il s'agit d'un problème d'incompatibilité entre rxjs et typescript, l'utilisation de "rxjs": "5.4.2" et "TypeScript": "~ 2.3.4" fonctionne pour moi.
Dans votre classe de sujet:
changer cette ligne:
lift<R>(operator: Operator<T, R>): Observable<T>;
à :
lift<R>(operator: Operator<T, R>): Observable<R>;
J'ai rencontré le même problème et j'ai trouvé le site Web suivant utile https://www.georgephillipson.com/blog/jquery/setting-up-angular-2-in-visual-studio-2017/ il avait pas à pas Les instructions détaillées sur la configuration d’Angular pour un site Web MVC expliquent comment corriger l’erreur mentionnée dans ce message, ainsi qu’un lien vers GitHub contenant le code complet.
Je l'ai trouvé utile alors j'ai pensé que je ferais savoir aux autres
Selon le message de Zoes, j'ai ajouté plus de raisons pour lesquelles je pense que le lien peut être utile
La page montre comment mettre à jour RxJS pour corriger l'erreur, elle indique également comment vérifier si Node et NPM est installé sur votre ordinateur et explique comment ajouter TypeScript. Elle explique ensuite comment configurer votre fichier cshtml pour afficher le contenu angulaire.
