ошибка TS2339: свойство «takeUntil» не существует для типа «Observable <Foo>» и других ошибок rxjs v.6 - PullRequest
Новая
       12

ошибка TS2339: свойство «takeUntil» не существует для типа «Observable <Foo>» и других ошибок rxjs v.6

0 голосов
/ 02 июля 2018

Я только недавно обновил много пакетов в своем угловом проекте.

Старый пакет.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"
  }
}

Новый пакет.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"
  }
}

Когда я запускаю npm install, используя новые обновления package.json, а затем ng serve, я получаю много ошибок компиляции:

ОШИБКА в src / app / all-match / all-match.component.ts (35,39): ошибка TS2339: свойство 'takeUntil' не существует для типа «Наблюдаемая». src / app / app.component.ts (28,39): ошибка TS2339: Свойство takeUntil не существует для типа Observable. src / app / authorization.service.ts (19,41): ошибка TS2339: свойство 'of' не существует для типа typeof Observable. src / app / authorization.service.ts (29,37): ошибка TS2339: свойство 'of' не существует для типа typeof Observable. src / app / authorization.service.ts (42,39): ошибка TS2339: свойство 'of' не существует для типа typeof Observable. src / app / authorization.service.ts (66,39): ошибка TS2339: свойство 'of' не существует для типа typeof Observable. src / app / authorization.service.ts (74,37): ошибка TS2339: свойство 'of' не существует для типа typeof Observable. src / app / authorization.service.ts (82,39): ошибка TS2339: свойство 'of' не существует для типа typeof Observable. src / app / database.service.ts (7,31): ошибка TS2305: Модуль ' "/ Users / СЧ / Desktop / dataJitsu / node_modules / angularfire2 / базы данных / индекс"' не имеет экспортированного члена 'FirebaseListObservable'. src / app / database.service.ts (7,55): ошибка TS2305: Модуль ' "/ Users / СЧ / Desktop / dataJitsu / node_modules / angularfire2 / базы данных / индекс"' не имеет экспортированного члена 'FirebaseObjectObservable'. src / app / match-display / match-display.component.ts (27,49): ошибка TS2339: Свойство takeUntil не существует для типа AngularFireObject <{}>. src / app / new-match / new-match.component.ts (10,30): ошибка TS2305: Модуль ' "/ Users / СЧ / Desktop / dataJitsu / node_modules / angularfire2 / базы данных / индекс"' не имеет экспортированного члена 'FirebaseListObservable'. src / app / new-match / new-match.component.ts (10,54): ошибка TS2305: модуль ' "/ Users / СЧ / Desktop / dataJitsu / node_modules / angularfire2 / базы данных / индекс"' не имеет экспортированного члена 'FirebaseObjectObservable'. src / app / new-match / new-match.component.ts (130,37): ошибка TS2339: Свойство 'switchMap' не существует для типа 'Observable'. src / app / protection.guard.ts (14,34): ошибка TS2339: свойство 'map' делает не существует по типу «Наблюдаемый». src / app / test-db / test-db.component.ts (7,30): ошибка TS2305: Модуль ' "/ Users / СЧ / Desktop / dataJitsu / node_modules / angularfire2 / базы данных / индекс"' не имеет экспортированного члена 'FirebaseListObservable'. src / app / test-db / test-db.component.ts (7,54): ошибка TS2305: Модуль ' "/ Users / СЧ / Desktop / dataJitsu / node_modules / angularfire2 / базы данных / индекс"' не имеет экспортированного члена 'FirebaseObjectObservable'. ЦСИ / приложение / пользовательский статус-отчет / пользовательский статус-report.component.ts (28,39): ошибка TS2339: свойство 'takeUntil' не существует для типа «Наблюдаемая». ЦСИ / приложение / пользовательский статус-отчет / пользовательский статус-report.component.ts (33,45): ошибка TS2339: свойство «подписка» не существует для типа 'AngularFireObject <{}>'. ЦСИ / приложение / пользовательский статус-отчет / пользовательский статус-report.component.ts (35,56): ошибка TS2339: свойство 'takeUntil' не существует для типа 'AngularFireObject <{}>'. ЦСИ / приложение / пользовательский статус-отчет / пользовательский статус-report.component.ts (43,66): ошибка TS2339: свойство 'takeUntil' не существует для типа 'AngularFireObject <{}>'.

Большинство этих ошибок, похоже, были связаны с rxjs, и я думаю, что правильно, потому что я использую rxjs v.6 в обновлении, и я понимаю, что многие вещи были сломаны между v.5 и v. 6.

Я поигрался с установкой rxjs-compat npm install rxjs@6 rxjs-compat@6 --save, и я могу подтвердить, что этот пакет, помимо того, что является здоровенным дополнением, не устраняет ни одной из ошибок, которые я вижу.

Я также автоматизировал некоторые обновления, запустив ts-lint, по совету здесь и здесь : 

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

Я получаю следующее сообщение:

Для файлов JavaScript не заданы действительные правила

Полагаю, это означает, что я не использовал правильные соглашения при использовании rxjs?

Я все еще довольно некомпетентен, когда дело доходит до rxjs, поэтому мне не совсем ясно, что еще нужно реорганизовать.

Но я думаю, что моя проблема действительно возникает до рефакторинга банки червей:

Я посмотрел на первую ошибку (

ошибка TS2339: свойство 'takeUntil' не существует для типа 'Observable'

один). Ошибка произошла от метода в моей службе аутентификации. В операторах импорта в верхней части этой службы (и в большинстве других файлов .ts, в этом отношении) моя IDE выделена много ошибок «not find module foo» (например, «not find module», «rxjs») '"для оператора импорта, import { Observable } from 'rxjs';).

Похожие ошибки в том же файле:

import { Injectable, EventEmitter } from '@angular/core'; («Не удается найти модуль,« @ angular / core »)

import * as firebase from 'firebase/app'; («Не удается найти модуль», firebase / app)

import { Router } from '@angular/router'; («Не удается найти модуль,« @ angular / router »)

Вот мой файл app.module.ts, если это полезно: 

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 { }

А вот ветвь репо, содержащая все эти проблемы. 

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

Любые советы по устранению неполадок или прямые решения проблем импорта приветствуются и приветствуются!

1 Ответ

0 голосов
/ 02 июля 2018

Похоже, что ваши операторы все еще связаны в rxjs 5.x.

Итак, подведем итог, что изменилось в rxjs6:

  1. Импорт различен. Теперь вы должны импортировать Observable, Subject, BehaviorSubject и т. Д. И методы, которые были в 'rxjs / add / observable' по-разному. Таким образом, все они должны быть импортированы из 'rxjs'. Например:

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

    В качестве альтернативы, все операторы, такие как map, concat, do (которые теперь называются tap) и т. Д., Должны быть импортированы из rxjs/operators. так что-то вроде:

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

    Я думаю, что ваш импорт довольно вменяемый.

  2. Вы должны использовать трубы вместо цепочки ваших операторов. Например, в вашем all-match.components.ts, строке 33, если вы замените: this.authService.getCurrentUser().takeUntil(this.ngUnsubscribe).subscribe(user=>{

    по

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

    Ваша ошибка takeUntil исчезнет.

    Таким же образом вместо Observable.of(true) следует импортировать оператора и использовать of(true).

    Вы можете попробовать это в вашем файле authorization.service.ts. Все "ошибки" будут исправлены.

    возможно, вам следует проверить это

  3. Что касается ошибок импорта пользовательских файлов, проверьте, действительно ли они существуют. Например:

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

    относится к

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

    нормально, так как этот файл ./api-keys не существует. PS: возможно у вас нет этих ошибок, если ключи не хранятся в git, если это так, игнорируйте это.

  4. Наконец, для AngularFire5.0, вы должны использовать один из операторов:

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

    становится (с методом valueChanges):

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

    Дополнительная информация: https://github.com/angular/angularfire2/blob/master/docs/version-5-upgrade.md

Удачи!

...