那些遇到过的问题

错误TS2339:属性'takeUntil'在类型'Observable <Foo>'和其他rxjs v.6错误上不存在

Att*_*s29 10 rxjs typescript rxjs5 angular rxjs6

我刚刚在我的角度项目中更新了很多包.

旧的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"
  }
}
Run Code Online (Sandbox Code Playgroud)

新的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"
  }
}
Run Code Online (Sandbox Code Playgroud)

当我npm install使用新的package.json更新运行时ng serve,我得到许多编译错误:

错误在SRC /应用程序/全部匹配/全部matches.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/mf/Desktop/dataJitsu/node_modules/angularfire2/database/index"'没有导出成员'FirebaseListObservable'.src/app/database.service.ts(7,55):错误TS2305:模块'"/ Users/mf/Desktop/dataJitsu/node_modules/angularfire2/database/index"'没有导出的成员'FirebaseObjectObservable'.src/app/match-display/match-display.component.ts(27,49):error TS2339:类型'AngularFireObject <{}>'上的属性'takeUntil'不存在.src/app/new-match/new-match.component.ts(10,30):错误TS2305:模块'"/ Users/mf/Desktop/dataJitsu/node_modules/angularfire2/database/index"'没有导出的成员' FirebaseListObservable".src/app/new-match/new-match.component.ts(10,54):错误TS2305:模块'"/ Users/mf/Desktop/dataJitsu/node_modules/angularfire2/database/index"'没有导出的成员' FirebaseObjectObservable".src/app/new-match/new-match.component.ts(130,37):错误TS2339:属性'switchMap'在'Observable'类型上不存在.src/app/protection.guard.ts(14,34):错误TS2339:属性'map'在类型'Observable'上不存在.src/app/test-db/test-db.component.ts(7,30):错误TS2305:模块'"/ Users/mf/Desktop/dataJitsu/node_modules/angularfire2/database/index"'没有导出的成员' FirebaseListObservable".src/app/test-db/test-db.component.ts(7,54):错误TS2305:模块'"/ Users/mf/Desktop/dataJitsu/node_modules/angularfire2/database/index"'没有导出的成员' FirebaseObjectObservable".SRC /应用/用户状态报告/用户状态,report.component.ts(28,39):错误TS2339:房产"takeUntil"不上键入"可观测"存在.src/app/user-status-report/user-status-report.component.ts(33,45):error TS2339:类型'AngularFireObject <{}>'上的属性'subscribe'不存在.src/app/user-status-report/user-status-report.component.ts(35,56):error TS2339:属性'takeUntil'在类型'AngularFireObject <{}>'上不存在.src/app/user-status-report/user-status-report.component.ts(43,26):error TS2339:类型'AngularFireObject <{}>'上的属性'takeUntil'不存在.

大多数这些错误似乎与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]
Run Code Online (Sandbox Code Playgroud)

我收到以下消息:

没有为JavaScript文件指定有效规则

我猜这意味着我在使用rxjs时没有使用正确的ts约定？

当谈到rxjs时,我仍然非常无能,所以我不清楚究竟还有什么需要重构.

但我认为我的问题实际上发生在重构蠕虫之前:

我看了第一个错误(

错误TS2339:属性'takeUntil'在类型'Observable'上不存在

一).该错误来自我的身份验证服务中的方法.在这个服务顶部的import语句中(以及大多数其他.ts文件),我的IDE突出显示了很多,"找不到模块foo"错误(例如,"找不到模块",rxjs '"对于import语句,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 { }
Run Code Online (Sandbox Code Playgroud)

这里是包含所有这些问题的回购分支.

git clone https://github.com/Atticus29/dataJitsu.git
cd dataJitsu
git checkout version-hell-SO 
npm install
ng serve
Run Code Online (Sandbox Code Playgroud)

欢迎并鼓励任何有关导入问题的故障排除提示或直接解决方案!

mad*_*oue 29

看起来您的运营商仍然以rxjs 5.x方式链接.

那么回顾一下rxjs6中的变化:

  1. 进口是不同的.现在,您应该以不同方式导入"rxjs/add/observable"中的Observable,Subject,BehaviorSubject等AND方法.所以这些都必须从'rxjs'导入.例如 :

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

    或者,所有运营商,如map,concat,do(现在称为tap)等都将从中导入rxjs/operators.像这样的东西:

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

    我认为你的进口非常合理.

  2. 您必须使用管道而不是链接您的操作员.例如,在你的all-matches.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

祝好运!

归档时间：

查看次数：

7026 次

最近记录：

7 年，7 月 前
相关归档
角度4中的HTTP和HTTPClient之间的区别？ 224
ngClass中的动态类名,角度为2 99
Vitest DefineConfig，“UserConfigExport”类型中不存在“test” 91
ng --version 显示 Angular 版本号和某些包的 &lt;error&gt; 15
创建没有文件夹的组件 12
TS2570 错误协助：“Promise&lt;User&gt;”类型上不存在属性“sendEmailVerification”。您是否忘记使用“等待”？ 11
打字稿：如何从继承的静态属性返回子类类型？ 8
你怎么知道你需要什么角度的包版本？ 8
Angular2在焦点事件上添加类 7
如何使角度应用程序从私有云铸造厂读取环境变量（运行时） 7
难疑归档
找到已安装的npm软件包的版本 2037
如何将多行中的文本连接成SQL Server中的单个文本字符串？ 1813
从JSON文件中解析值？ 1400
如何从其他线程更新GUI？ 1331
如何使用Sublime Text 2重新格式化HTML代码？ 1282
Android Studio中的Gradle是什么？ 1257
如何删除文本/输入框周围的边框(轮廓)？(铬) 1208
创建一个带参数的Bash别名？ 1164
如何在悬停而不是单击时使Twitter Bootstrap菜单下拉列表 1146
如何将参数传递给批处理文件？ 1100