web-dev-qa-db-fra.com

erreur TS2339: la propriété 'takeUntil' n'existe pas sur le type 'Observable <Foo>' et autres erreurs rxjs v.6

J'ai récemment mis à jour BEAUCOUP de packages dans mon angular.

Ancien package.json:

{
  "name": "data-jitsu",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^5.2.10",
    "@angular/cdk": "^5.2.5",
    "@angular/common": "5.2.7",
    "@angular/compiler": "5.2.7",
    "@angular/core": "5.2.7",
    "@angular/forms": "5.2.7",
    "@angular/http": "5.2.7",
    "@angular/material": "^5.2.5",
    "@angular/platform-browser": "5.2.7",
    "@angular/platform-browser-dynamic": "5.2.7",
    "@angular/router": "5.2.7",
    "@types/youtube": "0.0.29",
    "angular-froala-wysiwyg": "^2.7.2-1",
    "angular2-materialize": "^15.1.10",
    "angularfire2": "^4.0.0-rc0",
    "core-js": "^2.4.1",
    "d3": "^4.13.0",
    "firebase": "^3.9.0",
    "hammerjs": "^2.0.8",
    "jquery": "^3.0.0",
    "materialize-css": "^0.100.2",
    "ngx-youtube-player": "0.0.41",
    "rxjs": "^5.5.6",
    "zone.js": "^0.8.4"
  },
  "devDependencies": {
    "@angular/cli": "1.7.2",
    "@angular/compiler-cli": "5.2.7",
    "@types/bootstrap": "^3.3.36",
    "@types/d3": "^4.13.0",
    "@types/jasmine": "2.5.38",
    "@types/node": "~6.0.60",
    "codelyzer": "~2.0.0",
    "jasmine-core": "~2.5.2",
    "jasmine-spec-reporter": "~3.2.0",
    "karma": "~1.4.1",
    "karma-chrome-launcher": "~2.0.0",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^0.2.0",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.0",
    "ts-node": "~2.0.0",
    "tslint": "~4.5.0",
    "TypeScript": "2.6.2"
  }
}

Nouveau package.json:

{
  "name": "data-jitsu",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^6.0.3",
    "@angular/cdk": "^6.3.1",
    "@angular/common": "^6.0.3",
    "@angular/compiler": "^6.0.3",
    "@angular/core": "^6.0.3",
    "@angular/forms": "^6.0.3",
    "@angular/http": "^6.0.3",
    "@angular/material": "^6.2.0",
    "@angular/platform-browser": "^6.0.3",
    "@angular/platform-browser-dynamic": "^6.0.3",
    "@angular/router": "^6.0.3",
    "@types/youtube": "^0.0.29",
    "angular-froala-wysiwyg": "^2.7.2-1",
    "angular2-materialize": "^15.1.10",
    "angularfire2": "^5.0.0-rc.11",
    "core-js": "^2.4.1",
    "d3": "^4.13.0",
    "firebase": "^5.0.3",
    "hammerjs": "^2.0.8",
    "jquery": "^3.0.0",
    "materialize-css": "^0.100.2",
    "ngx-youtube-player": "0.0.41",
    "rxjs": "^6.2.1",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.6.8",
    "@angular/cli": "~6.0.8",
    "@angular/compiler-cli": "^6.0.3",
    "@angular/language-service": "^6.0.3",
    "@types/bootstrap": "^3.3.36",
    "@types/d3": "^4.13.0",
    "@types/jasmine": "~2.8.6",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^10.5.1",
    "codelyzer": "~4.2.1",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~1.7.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "~2.0.0",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.3.0",
    "ts-node": "~5.0.1",
    "tslint": "~5.9.1",
    "TypeScript": "~2.7.2"
  }
}

Quand je lance npm install en utilisant les nouvelles mises à jour de package.json puis ng serve, J'obtiens de nombreuses erreurs de compilation:

ERREUR dans src/app/all-matches/all-matches.component.ts (35,39): erreur TS2339: la propriété 'takeUntil' n'existe pas sur le type 'Observable'. src/app/app.component.ts (28,39): erreur TS2339: la propriété 'takeUntil' n'existe pas sur le type 'Observable'. src/app/autorisation.service.ts (19,41): erreur TS2339: la propriété 'de' n'existe pas sur le type 'typeof Observable'. src/app/autorisation.service.ts (29,37): erreur TS2339: la propriété 'de' n'existe pas sur le type 'typeof Observable'. src/app/autorisation.service.ts (42,39): erreur TS2339: la propriété 'de' n'existe pas sur le type 'typeof Observable'. src/app/autorisation.service.ts (66,39): erreur TS2339: la propriété 'de' n'existe pas sur le type 'typeof Observable'. src/app/autorisation.service.ts (74,37): erreur TS2339: la propriété 'de' n'existe pas sur le type 'typeof Observable'. src/app/autorisation.service.ts (82,39): erreur TS2339: la propriété 'de' n'existe pas sur le type 'typeof Observable'. src/app/database.service.ts (7,31): erreur TS2305: le module '"/ Users/mf/Desktop/dataJitsu/node_modules/angularfire2/database/index"' n'a pas de membre exporté 'FirebaseListObservable'. src/app/database.service.ts (7,55): erreur TS2305: le module '"/ Users/mf/Desktop/dataJitsu/node_modules/angularfire2/database/index"' n'a pas de membre exporté 'FirebaseObjectObservable'. src/app/match-display/match-display.component.ts (27,49): erreur TS2339: la propriété 'takeUntil' n'existe pas sur le type 'AngularFireObject <{}>'. src/app/new-match/new-match.component.ts (10,30): erreur TS2305: le module '"/ Users/mf/Desktop/dataJitsu/node_modules/angularfire2/database/index"' n'a pas de membre exporté '' FirebaseListObservable '. src/app/new-match/new-match.component.ts (10,54): erreur TS2305: le module '"/ Users/mf/Desktop/dataJitsu/node_modules/angularfire2/database/index"' n'a pas de membre exporté '' FirebaseObjectObservable '. src/app/new-match/new-match.component.ts (130,37): erreur TS2339: la propriété 'switchMap' n'existe pas sur le type 'Observable'. src/app/protection.guard.ts (14,34): erreur TS2339: la propriété 'map' n'existe pas sur le type 'Observable'. src/app/test-db/test-db.component.ts (7,30): erreur TS2305: le module '"/ Users/mf/Desktop/dataJitsu/node_modules/angularfire2/database/index"' n'a pas de membre exporté '' FirebaseListObservable '. src/app/test-db/test-db.component.ts (7,54): erreur TS2305: le module '"/ Users/mf/Desktop/dataJitsu/node_modules/angularfire2/database/index"' n'a pas de membre exporté '' FirebaseObjectObservable '. src/app/user-status-report/user-status-report.component.ts (28,39): erreur TS2339: la propriété 'takeUntil' n'existe pas sur le type 'Observable'. src/app/user-status-report/user-status-report.component.ts (33,45): erreur TS2339: la propriété 'subscribe' n'existe pas sur le type 'AngularFireObject <{}>'. src/app/user-status-report/user-status-report.component.ts (35,56): erreur TS2339: la propriété 'takeUntil' n'existe pas sur le type 'AngularFireObject <{}>'. src/app/user-status-report/user-status-report.component.ts (43,66): erreur TS2339: la propriété 'takeUntil' n'existe pas sur le type 'AngularFireObject <{}>'.

La plupart de ces erreurs semblaient avoir à voir avec rxjs, et je pense à juste titre parce que j'utilise rxjs v.6 dans la mise à jour, et je crois comprendre que beaucoup de choses ont été rompues entre v.5 et v.6.

J'ai joué avec l'installation de rxjs-compat npm install rxjs@6 rxjs-compat@6 --save, et je peux confirmer que ce package, en plus d'être un ajout important, ne résout aucune des erreurs que je vois.

J'ai également automatisé une partie de la mise à jour en exécutant ts-lint, selon les conseils ici et ici :

npm i -g rxjs-tslint
rxjs-5-to-6-migrate -p [path/to/tsconfig.json]

J'obtiens le message suivant:

Aucune règle valide n'a été spécifiée pour les fichiers JavaScript

Je suppose que cela signifie que je n'ai pas utilisé les conventions ts appropriées lors de l'utilisation de rxjs?

Je suis encore assez incompétent en ce qui concerne les rxjs, donc je ne sais pas exactement quoi d'autre doit être refactorisé.

Mais je pense que mon problème survient avant la refactorisation des vers:

J'ai jeté un œil à la première erreur (la

erreur TS2339: la propriété 'takeUntil' n'existe pas sur le type 'Observable'

une). L'erreur provient d'une méthode de mon service d'authentification. Dans les instructions d'importation en haut de ce service (et la plupart des autres fichiers .ts, d'ailleurs), mon IDE est mis en évidence beaucoup d'erreurs "impossible de trouver le module foo" ( par exemple, "impossible de trouver le module, 'rxjs'" pour l'instruction d'importation, import { Observable } from 'rxjs';).

Erreurs similaires dans le même fichier:

import { Injectable, EventEmitter } from '@angular/core'; ("Impossible de trouver le module," @ angular/core ")

import * as firebase from 'firebase/app'; ("Impossible de trouver le module", base de données/application)

import { Router } from '@angular/router'; ("Impossible de trouver le module," @ angular/router ")

Voici mon fichier app.module.ts, au cas où cela serait utile:

import { MaterializeModule } from 'angular2-materialize'
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { masterFirebaseConfig } from './api-keys';
import { AngularFireModule } from 'angularfire2';
import { AngularFireDatabaseModule } from 'angularfire2/database';
import { AppComponent } from './app.component';
import { YoutubeComponent } from './youtube/youtube.component';
import { routing } from './app.routing';
import { NewMatchComponent } from './new-match/new-match.component';
import { CreateAccountComponent } from './create-account/create-account.component';
import { TestDbComponent } from './test-db/test-db.component';
import { LandingComponent } from './landing/landing.component';
import { MatchDisplayComponent } from './match-display/match-display.component';
import { AuthorizationService } from './authorization.service';
import { AngularFireAuthModule } from 'angularfire2/auth';
import { DatabaseService } from './database.service';
import { TextTransformationService } from './text-transformation.service';
import { ValidationService } from './validation.service';
import { LoginComponent } from './login/login.component';
import { ProtectionGuard } from './protection.guard';
import { AllMatchesComponent } from './all-matches/all-matches.component';
import { AnnotationDisplayComponent } from './annotation-display/annotation-display.component';
import { D3Service } from './d3.service';
import { NotfoundComponent } from './notfound/notfound.component';
import { UserStatusReportComponent } from './user-status-report/user-status-report.component';
import { PaymentOrAnnotationDetailsComponent } from './payment-or-annotation-details/payment-or-annotation-details.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { MatSelectModule } from '@angular/material/select';
import { MatOptionModule } from '@angular/material/core';
import { MatInputModule } from '@angular/material/input';
import { MatFormFieldModule } from '@angular/material';
import { MatTableModule } from '@angular/material/table';
// import { MatTreeModule } from '@angular/material';
import { MatTreeModule } from '@angular/material/tree';
import { MatSortModule } from '@angular/material';
import { MatDatepickerModule, MatNativeDateModule, MatPaginatorModule } from '@angular/material';
import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
import { CdkTreeModule } from '@angular/cdk/tree';


export const firebaseConfig = {
  apiKey: masterFirebaseConfig.apiKey,
  authDomain: masterFirebaseConfig.authDomain,
  databaseURL: masterFirebaseConfig.databaseURL,
  storageBucket: masterFirebaseConfig.storageBucket
};

@NgModule({
  declarations: [
    AppComponent,
    YoutubeComponent,
    NewMatchComponent,
    CreateAccountComponent,
    TestDbComponent,
    LandingComponent,
    MatchDisplayComponent,
    LoginComponent,
    AllMatchesComponent,
    AnnotationDisplayComponent,
    NotfoundComponent,
    UserStatusReportComponent,
    PaymentOrAnnotationDetailsComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    routing,
    MaterializeModule,
    ReactiveFormsModule,
    AngularFireModule.initializeApp(firebaseConfig),
    AngularFireDatabaseModule,
    AngularFireAuthModule,
    BrowserAnimationsModule,
    MatSlideToggleModule,
    CdkTreeModule,
    MatSelectModule,
    MatOptionModule,
    MatInputModule,
    MatNativeDateModule,
    MatDatepickerModule,
    MatTableModule,
    MatSelectModule,
    MatSortModule,
    MatProgressSpinnerModule,
    MatPaginatorModule,
    MatTreeModule
  ],
  providers: [AuthorizationService, DatabaseService, ProtectionGuard, D3Service, ValidationService, TextTransformationService],
  bootstrap: [AppComponent]
})
export class AppModule { }

Et voici la branche du dépôt contenant toutes ces questions.

git clone https://github.com/Atticus29/dataJitsu.git
cd dataJitsu
git checkout version-hell-SO 
npm install
ng serve

Toutes les astuces de dépannage ou solutions directes aux problèmes d'importation sont les bienvenues et encouragées!

angulartypescriptrxjsrxjs5rxjs6
10
Atticus29

Il semble que vos opérateurs soient toujours enchaînés à la manière de rxjs 5.x.

Donc, pour récapituler ce qui a changé dans rxjs6:

  1. Les importations sont différentes. Maintenant, vous devez importer les méthodes Observable, Subject, BehaviorSubject etc. ET qui se trouvaient dans 'rxjs/add/observable' différemment. Tous ces éléments doivent donc être importés de "rxjs". Par exemple :

    import {Observable, Subject, of, from} from 'rxjs';

    Alternativement, tous les opérateurs comme map, concat, do (qui s'appelle maintenant tap) etc. doivent être importés de rxjs/operators. donc quelque chose comme:

    import { map, tap, takeUntil} from 'rxjs/operators';

    Je pense que vos importations sont assez sensées.

  2. Vous devez utiliser des tuyaux au lieu de chaîner vos opérateurs. Par exemple, dans votre all-matches.components.ts, ligne 33, si vous remplacez: this.authService.getCurrentUser().takeUntil(this.ngUnsubscribe).subscribe(user=>{

    par

    this.authService.getCurrentUser().pipe(takeUntil(this.ngUnsubscribe)).subscribe(user=>{

    votre erreur takeUnt disparaîtra.

    De la même manière, au lieu de Observable.of(true), vous devez importer l'opérateur et utiliser of(true).

    Vous pouvez essayer cela dans votre fichier autorisation.service.ts. Tous les "erreurs" seront corrigés.

    vous devriez peut-être l'inspecter

  3. En ce qui concerne les erreurs d'importation concernant les fichiers personnalisés, veuillez vérifier que les fichiers existent réellement. Par exemple :

    ERROR in src/app/app.module.ts(6,38): error TS2307: Cannot find module './api-keys'

    relatif à

    import { masterFirebaseConfig } from './api-keys'

    est normal, car ce fichier './api-keys' n'existe pas. PS: peut-être que vous n'avez pas ces erreurs si les clés ne sont pas stockées dans git, si c'est le cas, ignorez cela.

  4. Enfin, à propos d'AngularFire5.0, vous devez utiliser l'un des opérateurs:

    Db.list('items').subscribe(console.log)

    devient (avec la méthode valueChanges):

    Db.list<Item>('items').valueChanges().subscribe(console.log)

    Plus d'informations: https://github.com/angular/angularfire2/blob/master/docs/version-5-upgrade.md

Bonne chance!

28
madjaoue