将Angular4.4升级到6.0的过程（第一部分）

1 年 ago

科, 颖

1 minute

这篇文章是关于Business Bank集团开发者圣诞日历的第22篇文章。

大家好，我是商业银行集团的清水。
今天我要谈谈我们公司前端开发环境Angular的升级问题，从v4.4升级到v6.0。
（尽管现在最新的版本是v7.1.1，但当我们开始升级任务时，v7还没有发布，所以我们先升级到v6！！！这就是我们做出这个决定的原因。）

原来各种库的版本

Rxjs: 5.5.2

目标

Rxjs: 6.0.0

更新任务按照Angular官方文档中的Angular升级指南进行。因此，我们将按照Angular升级指南的各个部分逐步进行讲解。

更新之前

最大的任务是迁移HttpClient。关于这个问题，我已在以往的文章中写过，请随时查看。
关于从Angular的Http迁移到HttpClient的故事
除此以外，按照指南进行修复工作就完成了。

更新期间

在这里的工作大致可分为四个方面。

１）　提升Node的版本

后日 @tronperidot 会谈到这件事。

2）安装AngularCLI

请按照以下步骤执行npm install @angular/cli@6.0.0的安装：

npm uninstall angular2-elastic
npm uninstall angular2-masonry

由于每个组件都没有跟随Angular的新版本进行更新，因此我们将其删除。

由于我们仍然想要使用基于masonry的UI，所以我们正在考虑将angular2-masonry替换为ngx-masonry或ng-masonry-grid。

由于ngx-masonry是angular2-masonry的一个分支，所以替换本身应该很简单。

如果我有时间，我会进一步研究改进的方法，但请不要期望得到支持，因为我没有时间做那些事情。

因为听说可以使用ng-masonry-grid，所以正在尝试检查是否会出现问题。

3）更新Angular相关的库。

为了执行 `ng update @angular/core@6.0.0`，需要更新的相关库如下：

npm i -D codelyzer@4.5.0
npm uninstall ng2-page-scroll
npm i -S ngx-page-scroll
npm install @angular/compiler-cli@6.0.0
npm i -D angular-in-memory-web-api@0.7.0
npm i -S ngx-toastr@9.1.1
npm i -S angulartics2@7.2.3

由于ng2-page-scroll已被弃用，所以我换成了ngx-page-scroll。只需进行替换，没有发生任何重大变化。

４）反射注入器

由于ReflectiveInjector被弃用，所以我尝试替换为StaticInjector。
在对话框组件周围使用了ReflectiveInjector，但考虑将对话框组件迁移到Angular Material，因此我添加了FIXME注释并保持挂起状态。
如果有关于替换ReflectiveInjector的讨论，请告知。

在这里，Angular的更新和CLI的引入已经完成了！

更新之后

这是关于RxJS的更新工作。
我安装了rxjs-tslint并使用rxjs-5-to-6-migrate进行了从RxJS v5到v6的迁移（因为它不是通过CLI生成的应用程序，所以使用了tsconfig.json）。

rxjs-5-to-6-migrate -p tsconfig.json

虽然对于v6版本有很多改动，但是使用rxjs-5-to-6-migrate工具可以进行基本修复，几乎不需要进行迁移工作。

我也考虑过在Prettier中进行更正，但不知道有什么好的方法。如果有人有相关知识，请告诉我。
另外，由于一些使用了Observable.merge和Observable.create的部分没有进行迁移，所以我手动修正了几处。（我在考虑是否应该对未迁移的处理进行重构）

tslint代码检查工具

由于codelyzer的更新，我已经从tslint中删除了以下使用的规则。

no-access-missing-member
templates-use-public
template-to-ng-template
invoke-injectable

我先前在黑名单中将”rxjs”指定，现已删除。

"import-blacklist": [
  true,
  "rxjs"
],

我已经对以上进行了修正，并确认了通过了lint的测试。

Angular 6: Angular6

我已经完成了上述任务，成功升级到了Angular 6.0.0！

嗯，我成功地进行了更新！！！！！
当我尝试在本地构建应用程序时，出现了错误，????
关于接下来的故事，将会由@tronperidot先生在他的Angular4.4 -> 6.0更新故事（后篇）中讲述。

总结

在这次任务中，我想到的重要性是追随最新版本。
随着开发环境使用的版本与最新版本之间的差距越大，进行更新任务的成本也越高。
最重要的是，我们不会感到沮丧，说“我想使用新出的那个功能！！但是版本太低，不支持…”。
在忙于开发功能的同时，像更新任务这样的改善工作往往被放在后面，但团队需要达成共识，认识到这些也是优先任务的重要性。

明天是由@Akiyah负责，请多关照！另外，明后天还计划发布《关于升级Angular4.4至6.0的谈话》的后续篇章，请@tronperidot先生协助！