迁移角度5到角度7

问题描述 投票:1回答:2

我已经从angular 5迁移到Angular 7.之后我的RxJs操作有问题,比如observable和我的@ngrx / store。这是我的错误:

ERROR in node_modules/@ngrx/store/src/actions_subject.d.ts(2,10): error TS2305: Module C:/Users/AbousyllabaNdiaye/Documents/amundi/ClientAmundiFileIntegration/node_modules/rxjs/BehaviorSubject"' has no exported member 'BehaviorSubject'.
node_modules/@ngrx/store/src/reducer_manager.d.ts(2,10): error TS2305: Module '"C:/Users/AbousyllabaNdiaye/Documents/amundi/ClientAmundiFileIntegration/node_modules/rxjs/BehaviorSubject"' has no exported member 'BehaviorSubject'.
node_modules/@ngrx/store/src/reducer_manager.d.ts(3,10): error TS2305: Module '"C:/Users/AbousyllabaNdiaye/Documents/amundi/ClientAmundiFileIntegration/node_modules/rxjs/Observable"' has no exported member 'Observable'.
node_modules/@ngrx/store/src/scanned_actions_subject.d.ts(2,10): error TS2305: Module '"C:/Users/AbousyllabaNdiaye/Documents/amundi/ClientAmundiFileIntegration/node_modules/rxjs/Subject"' has no exported member 'Subject'.
node_modules/@ngrx/store/src/state.d.ts(2,10): error TS2305: Module '"C:/Users/AbousyllabaNdiaye/Documents/amundi/ClientAmundiFileIntegration/node_modules/rxjs/BehaviorSubject"' has no exported member 'BehaviorSubject'.
node_modules/@ngrx/store/src/state.d.ts(3,10): error TS2305: Module '"C:/Users/AbousyllabaNdiaye/Documents/amundi/ClientAmundiFileIntegration/node_modules/rxjs/Observable"' has no exported member 'Observable'.
node_modules/@ngrx/store/src/store.d.ts(2,10): error TS2305: Module '"C:/Users/AbousyllabaNdiaye/Documents/amundi/ClientAmundiFileIntegration/node_modules/rxjs/Observer"' has no exported member 'Observer'.
node_modules/@ngrx/store/src/store.d.ts(3,10): error TS2305: Module '"C:/Users/AbousyllabaNdiaye/Documents/amundi/ClientAmundiFileIntegration/node_modules/rxjs/Observable"' has no exported member 'Observable'.
node_modules/@ngrx/store/src/store.d.ts(4,10): error TS2305: Module '"C:/Users/AbousyllabaNdiaye/Documents/amundi/ClientAmundiFileIntegration/node_modules/rxjs/Operator"' has no exported member 'Operator'.
node_modules/rxjs/BehaviorSubject.d.ts(1,15): error TS2307: Cannot find module 'rxjs-compat/BehaviorSubject'.
node_modules/rxjs/Observable.d.ts(1,15): error TS2307: Cannot find module 'rxjs-compat/Observable'.
node_modules/rxjs/Observer.d.ts(1,15): error TS2307: Cannot find module 'rxjs-compat/Observer'.
node_modules/rxjs/Operator.d.ts(1,15): error TS2307: Cannot find module 'rxjs-compat/Operator'.
node_modules/rxjs/Subject.d.ts(1,15): error TS2307: Cannot find module 'rxjs-compat/Subject'.
src/app/habilitation/habilitation.component.ts(96,36): error TS2339: Property 'subscribe' does not exist on type 'Store<Principal>'.
src/app/sidebare/sidebare.component.ts(17,36): error TS2339: Property 'subscribe' does not exist on type 'Store<Principal>'.
angular rxjs store angular7
2个回答
3
投票

你应该修复你的Rxjs导入。从v6开始使用rxjs有一些相当大的变化。

尝试使用:import { BehaviorSubject } from 'rxjs';

与其他进口相似:

import { Observable } from 'rxjs'; import { Operator } from 'rxjs'; 所有这些出口现在都是从rxjs完成的。你可以打开rxjs/index.d.ts来查看rxjs的所有输出。

由于pipe的变化以及与JavaScript保留字的冲突,一些运算符必须重命名:

  1. do成为tap
  2. catchfinally成为catchError finalize
  3. switch成为switchAll

其他功能也被重命名:

  • fromPromise成为from
  • throw成为throwError

1
投票

升级角度5到7时请遵循以下几点

Angular Update Guide | 5.2 -> 7.2 for Advanced Apps

更新前

1)如果从@ angular / core导入任何动画服务或工具,则应从@ angular / animations导入它们

2)用ngOutletContext替换ngTemplateOutletContext

3)用CollectionChangeRecord替换IterableChangeRecord

4)您使用Renderer的任何地方,现在使用Renderer2

5)如果使用preserveQueryParams,请使用queryParamsHandling

6)如果您使用遗留的HttpModule和Http服务,请切换到HttpClientModule和HttpClient服务。 HttpClient简化了默认的人机工程学(您不再需要映射到json),现在支持类型返回值和拦截器。阅读angular.io的更多信息

7)如果你使用@ angular / platform-b​​rowser中的DOCUMENT,你应该从@ angular / common开始导入它

8)您使用ReflectiveInjector的任何地方,现在都使用StaticInjector

9)在angularCompilerOptions键下的tsconfig.json中为preserveWhitespace选择off值,以获得此设置的好处,该设置在v6中默认设置为off。

在更新期间

1)确保您使用的是Node 8或更高版本

2)全局和本地更新Angular CLI,并通过运行以下命令将配置迁移到新的angular.json格式:

npm install -g @angular/cli npm install @angular/cli ng update @angular/cli

3)更新package.json中可能包含的任何脚本,以使用最新的Angular CLI命令。现在,所有CLI命令都使用两个用于标记的破折号(例如ng build --prod --source-map)与POSIX兼容。

4)将所有Angular框架包更新到v6,以及正确版本的RxJS和TypeScript。

ng update @angular/core

更新后,TypeScript和RxJS将更准确地在您的应用程序中流动类型,这可能会暴露应用程序的类型中的现有错误

5)在Angular Forms中,当您调用AbstractControl#markAsPending时,AbstractControl#statusChanges现在会发出PENDING事件。如果您正在过滤或检查来自statusChanges的事件,请确保在调用markAsPending时考虑新事件。

6)如果使用禁用区域内的AnimationEvent的totalTime,它将不再报告时间为0.要检测动画事件是否报告禁用的动画,则可以使用event.disabled属性。

7)ngModelChange现在在其控制而不是之前更新值/有效性之后发出,以更好地匹配期望。如果您依赖这些事件的顺序,则需要开始跟踪组件中的旧值。

8)将Angular Material更新为最新版本。

ng update @angular/material

这也将自动迁移已弃用的API。

9)使用ng update或普通的包管理器工具来识别和更新其他依赖项。

10)如果您将TypeScript配置为严格(如果在tsconfig.json文件中已将strict设置为true),请更新tsconfig.json以禁用strictPropertyInitialization或将属性初始化从ngOnInit移动到构造函数。您可以在TypeScript 2.7发行说明中了解有关此标志的更多信息。

11)使用rxjs-tslint自动更新规则删除已弃用的RxJS 6功能

对于大多数应用程序,这将意味着运行以下两个命令:

npm install -g rxjs-tslint rxjs-5-to-6-migrate -p src/tsconfig.app.json

12)Angular现在使用TypeScript 3.1,阅读更多有关任何潜在破坏性变化的信息:https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-1.html

13)Angular现在增加了对Node 10的支持:https://nodejs.org/en/blog/release/v10.0.0/

14)通过在终端中运行ng update @ angular / cli @ angular / core,更新到核心框架和CLI的v7

15)通过在终端中运行ng update @ angular / material,将Angular Material更新为v7。您应该测试应用程序的大小和布局更改。

16)如果你使用截图测试,你将需要重新生成你的截图黄金文件,因为许多小的视觉调整已经落地

更新后

1)一旦你和你的所有依赖关系更新到RxJS 6,删除rxjs-compat

npm uninstall rxjs-compat

2)如果使用Angular Service工作程序,请将任何versionedFiles迁移到files数组。行为是一样的。

3)停止使用matRippleSpeedFactorbaseSpeedFactor进行涟漪,而不是使用动画配置。


0
投票

npm和rxjs-compat

如果您想让解决方案快速运行!否则按照上面的解决方案。

© www.soinside.com 2019 - 2024. All rights reserved.