将 Angular 5 迁移到 Angular 7

Posted 2023-03-16

技术标签:

【中文标题】将 Angular 5 迁移到 Angular 7【英文标题】：Migration Angular 5 to angular 7 【发布时间】：2019-05-18 00:24:24 【问题描述】：

我已经从 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>'.

【问题讨论】：

您可以编辑您的帖子并添加您的.ts 文件的代码吗？你看过 RxJS 迁移指南吗？当从 RxJS v5 迁移到 v6 时，有很多不同之处。但是您也可以使用一个兼容性库，因此您不必更改所有内容。在此处查看迁移指南：github.com/ReactiveX/rxjs/blob/master/docs_app/content/guide/v6/… 【参考方案1】：

您应该修复您的 Rxjs 导入。从 v6 开始，rxjs 的使用发生了相当大的变化。

尝试使用：import BehaviorSubject from 'rxjs';

与其他进口类似：

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

由于与pipe的变化以及与JavaScript保留字的冲突，一些运算符不得不重命名：

do

tap

catch

finally

catchError

finalize

switch

switchAll

其他功能也被重命名：

fromPromise 变为 from throw 变为 throwError

【讨论】：

或者如果只是BehaviorSubject使用\import BehaviorSubject from 'rxjs/internal/BehaviorSubject'; rxjs/index.d.ts 已经有了export BehaviorSubject from './internal/BehaviorSubject';，所以你可以简单地利用暴露的价值，而不是深入挖掘它的内部。【参考方案2】：

npm i rxjs-compat

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

【讨论】：

【参考方案3】：

在将 Angular 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-browser 的文档，你应该开始从@angular/common 导入它

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

9) 在 angularCompilerOptions 键下的 tsconfig.json 中为 preserveWhitespaces 选择 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 表单中，AbstractControl#statusChanges 现在会在您调用 AbstractControl#markAsPending 时发出 PENDING 事件。如果您正在过滤或检查来自 statusChanges 的事件，请确保在调用 markAsPending 时考虑新事件。

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

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

8) 将 Angular 材质更新到最新版本。

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 Worker，请将任何 versionedFiles 迁移到 files 数组。行为是一样的。