错误 TS2339：属性 'takeUntil' 在类型 'Observable<Foo>' 和其他 rxjs v.6 错误上不存在
error TS2339: Property 'takeUntil' does not exist on type 'Observable<Foo>' and other rxjs v.6 errors
我最近刚刚在我的 angular 项目中更新了很多包。
旧 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"
}
}
新 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"
}
}
当我 运行 npm install 使用新的 package.json 更新然后 ng serve，我得到很多编译错误：
ERROR in src/app/all-matches/all-matches.component.ts(35,39): error
TS2339: Property 'takeUntil' does not exist on type
'Observable'. src/app/app.component.ts(28,39): error TS2339:
Property 'takeUntil' does not exist on type 'Observable'.
src/app/authorization.service.ts(19,41): error TS2339: Property 'of'
does not exist on type 'typeof Observable'.
src/app/authorization.service.ts(29,37): error TS2339: Property 'of'
does not exist on type 'typeof Observable'.
src/app/authorization.service.ts(42,39): error TS2339: Property 'of'
does not exist on type 'typeof Observable'.
src/app/authorization.service.ts(66,39): error TS2339: Property 'of'
does not exist on type 'typeof Observable'.
src/app/authorization.service.ts(74,37): error TS2339: Property 'of'
does not exist on type 'typeof Observable'.
src/app/authorization.service.ts(82,39): error TS2339: Property 'of'
does not exist on type 'typeof Observable'.
src/app/database.service.ts(7,31): error TS2305: Module
'"/Users/mf/Desktop/dataJitsu/node_modules/angularfire2/database/index"'
has no exported member 'FirebaseListObservable'.
src/app/database.service.ts(7,55): error TS2305: Module
'"/Users/mf/Desktop/dataJitsu/node_modules/angularfire2/database/index"'
has no exported member 'FirebaseObjectObservable'.
src/app/match-display/match-display.component.ts(27,49): error TS2339:
Property 'takeUntil' does not exist on type 'AngularFireObject<{}>'.
src/app/new-match/new-match.component.ts(10,30): error TS2305: Module
'"/Users/mf/Desktop/dataJitsu/node_modules/angularfire2/database/index"'
has no exported member 'FirebaseListObservable'.
src/app/new-match/new-match.component.ts(10,54): error TS2305: Module
'"/Users/mf/Desktop/dataJitsu/node_modules/angularfire2/database/index"'
has no exported member 'FirebaseObjectObservable'.
src/app/new-match/new-match.component.ts(130,37): error TS2339:
Property 'switchMap' does not exist on type 'Observable'.
src/app/protection.guard.ts(14,34): error TS2339: Property 'map' does
not exist on type 'Observable'.
src/app/test-db/test-db.component.ts(7,30): error TS2305: Module
'"/Users/mf/Desktop/dataJitsu/node_modules/angularfire2/database/index"'
has no exported member 'FirebaseListObservable'.
src/app/test-db/test-db.component.ts(7,54): error TS2305: Module
'"/Users/mf/Desktop/dataJitsu/node_modules/angularfire2/database/index"'
has no exported member 'FirebaseObjectObservable'.
src/app/user-status-report/user-status-report.component.ts(28,39):
error TS2339: Property 'takeUntil' does not exist on type
'Observable'.
src/app/user-status-report/user-status-report.component.ts(33,45):
error TS2339: Property 'subscribe' does not exist on type
'AngularFireObject<{}>'.
src/app/user-status-report/user-status-report.component.ts(35,56):
error TS2339: Property 'takeUntil' does not exist on type
'AngularFireObject<{}>'.
src/app/user-status-report/user-status-report.component.ts(43,66):
error TS2339: Property 'takeUntil' does not exist on type
'AngularFireObject<{}>'.
大多数这些错误似乎与 rxjs 有关，我认为这是正确的，因为我在更新中使用 rxjs v.6，我的理解是 v.5 和 v.5 之间有很多问题五.6。
我试过安装 rxjs-compat
npm install rxjs@6 rxjs-compat@6 --save，我可以确认这个包除了是一个重要的补充之外，没有解决我看到的任何错误。
，我还通过 运行ning ts-lint 自动执行了一些更新
npm i -g rxjs-tslint
rxjs-5-to-6-migrate -p [path/to/tsconfig.json]
我收到以下消息：
No valid rules have been specified for JavaScript files
我猜这意味着我在使用 rxjs 时没有使用正确的 ts 约定？
我在 rxjs 方面仍然很无能，所以我不清楚到底还有什么需要重构。
但我认为我的问题实际上发生在蠕虫的重构之前：
我查看了第一个错误（
error TS2339: Property 'takeUntil' does not exist on type 'Observable'
一个）。错误来自我的身份验证服务中的一个方法。在此服务（以及大多数其他 .ts 文件）顶部的导入语句中，我的 IDE 突出显示了很多 "cannot find module foo" 错误（例如，"cannot find module, 'rxjs'" 对于导入语句，import { Observable } from 'rxjs';).
同一文件中的类似错误：
import { Injectable, EventEmitter } from '@angular/core'; ("Cannot find module, "@angular/core")
import * as firebase from 'firebase/app'; ("Cannot find module, "firebase/app)
import { Router } from '@angular/router'; ("Cannot find module, "@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
欢迎并鼓励任何疑难解答提示或导入问题的彻底解决方案！
看起来您的运算符仍然以 rxjs 5.x 方式链接。
所以回顾一下 rxjs6 中的变化：
导入不同。现在，您应该导入 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';
我觉得你的导入很正常。
您必须使用管道而不是链接您的运算符。
例如，在您的 all-matches.components.ts，第 33 行中，如果您替换：
this.authService.getCurrentUser().takeUntil(this.ngUnsubscribe).subscribe(user=>{
来自
this.authService.getCurrentUser().pipe(takeUntil(this.ngUnsubscribe)).subscribe(user=>{
您的 takeUntil 错误将消失。
以同样的方式，您应该导入运算符并使用 of(true) 而不是 Observable.of(true)。
您可以在 authorization.service.ts 文件中试试这个。所有 "of errors" 将被修复。
也许你应该检查一下这个
关于自定义文件的导入错误，请检查文件是否真实存在。例如：
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 中，则可能不会出现这些错误，如果是，请忽略此错误。
最后，关于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
祝你好运！
我最近刚刚在我的 angular 项目中更新了很多包。
旧 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"
}
}
新 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"
}
}
当我 运行 npm install 使用新的 package.json 更新然后 ng serve，我得到很多编译错误：
ERROR in src/app/all-matches/all-matches.component.ts(35,39): error TS2339: Property 'takeUntil' does not exist on type 'Observable'. src/app/app.component.ts(28,39): error TS2339: Property 'takeUntil' does not exist on type 'Observable'. src/app/authorization.service.ts(19,41): error TS2339: Property 'of' does not exist on type 'typeof Observable'. src/app/authorization.service.ts(29,37): error TS2339: Property 'of' does not exist on type 'typeof Observable'. src/app/authorization.service.ts(42,39): error TS2339: Property 'of' does not exist on type 'typeof Observable'. src/app/authorization.service.ts(66,39): error TS2339: Property 'of' does not exist on type 'typeof Observable'. src/app/authorization.service.ts(74,37): error TS2339: Property 'of' does not exist on type 'typeof Observable'. src/app/authorization.service.ts(82,39): error TS2339: Property 'of' does not exist on type 'typeof Observable'. src/app/database.service.ts(7,31): error TS2305: Module '"/Users/mf/Desktop/dataJitsu/node_modules/angularfire2/database/index"' has no exported member 'FirebaseListObservable'. src/app/database.service.ts(7,55): error TS2305: Module '"/Users/mf/Desktop/dataJitsu/node_modules/angularfire2/database/index"' has no exported member 'FirebaseObjectObservable'. src/app/match-display/match-display.component.ts(27,49): error TS2339: Property 'takeUntil' does not exist on type 'AngularFireObject<{}>'. src/app/new-match/new-match.component.ts(10,30): error TS2305: Module '"/Users/mf/Desktop/dataJitsu/node_modules/angularfire2/database/index"' has no exported member 'FirebaseListObservable'. src/app/new-match/new-match.component.ts(10,54): error TS2305: Module '"/Users/mf/Desktop/dataJitsu/node_modules/angularfire2/database/index"' has no exported member 'FirebaseObjectObservable'. src/app/new-match/new-match.component.ts(130,37): error TS2339: Property 'switchMap' does not exist on type 'Observable'. src/app/protection.guard.ts(14,34): error TS2339: Property 'map' does not exist on type 'Observable'. src/app/test-db/test-db.component.ts(7,30): error TS2305: Module '"/Users/mf/Desktop/dataJitsu/node_modules/angularfire2/database/index"' has no exported member 'FirebaseListObservable'. src/app/test-db/test-db.component.ts(7,54): error TS2305: Module '"/Users/mf/Desktop/dataJitsu/node_modules/angularfire2/database/index"' has no exported member 'FirebaseObjectObservable'. src/app/user-status-report/user-status-report.component.ts(28,39): error TS2339: Property 'takeUntil' does not exist on type 'Observable'. src/app/user-status-report/user-status-report.component.ts(33,45): error TS2339: Property 'subscribe' does not exist on type 'AngularFireObject<{}>'. src/app/user-status-report/user-status-report.component.ts(35,56): error TS2339: Property 'takeUntil' does not exist on type 'AngularFireObject<{}>'. src/app/user-status-report/user-status-report.component.ts(43,66): error TS2339: Property 'takeUntil' does not exist on type 'AngularFireObject<{}>'.
大多数这些错误似乎与 rxjs 有关，我认为这是正确的，因为我在更新中使用 rxjs v.6，我的理解是 v.5 和 v.5 之间有很多问题五.6。
我试过安装 rxjs-compat
npm install rxjs@6 rxjs-compat@6 --save，我可以确认这个包除了是一个重要的补充之外，没有解决我看到的任何错误。
npm i -g rxjs-tslint
rxjs-5-to-6-migrate -p [path/to/tsconfig.json]
我收到以下消息：
No valid rules have been specified for JavaScript files
我猜这意味着我在使用 rxjs 时没有使用正确的 ts 约定？
我在 rxjs 方面仍然很无能，所以我不清楚到底还有什么需要重构。
但我认为我的问题实际上发生在蠕虫的重构之前：
我查看了第一个错误（
error TS2339: Property 'takeUntil' does not exist on type 'Observable'
一个）。错误来自我的身份验证服务中的一个方法。在此服务（以及大多数其他 .ts 文件）顶部的导入语句中，我的 IDE 突出显示了很多 "cannot find module foo" 错误（例如，"cannot find module, 'rxjs'" 对于导入语句，import { Observable } from 'rxjs';).
同一文件中的类似错误：
import { Injectable, EventEmitter } from '@angular/core'; ("Cannot find module, "@angular/core")
import * as firebase from 'firebase/app'; ("Cannot find module, "firebase/app)
import { Router } from '@angular/router'; ("Cannot find module, "@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
欢迎并鼓励任何疑难解答提示或导入问题的彻底解决方案！
看起来您的运算符仍然以 rxjs 5.x 方式链接。
所以回顾一下 rxjs6 中的变化：
导入不同。现在，您应该导入 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';我觉得你的导入很正常。
您必须使用管道而不是链接您的运算符。 例如，在您的 all-matches.components.ts，第 33 行中，如果您替换：
this.authService.getCurrentUser().takeUntil(this.ngUnsubscribe).subscribe(user=>{来自
this.authService.getCurrentUser().pipe(takeUntil(this.ngUnsubscribe)).subscribe(user=>{您的 takeUntil 错误将消失。
以同样的方式，您应该导入运算符并使用
of(true)而不是Observable.of(true)。您可以在 authorization.service.ts 文件中试试这个。所有 "of errors" 将被修复。
也许你应该检查一下这个
关于自定义文件的导入错误，请检查文件是否真实存在。例如：
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 中，则可能不会出现这些错误，如果是，请忽略此错误。
最后，关于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
祝你好运！