当将Angular4.4升级至6.0时（后篇）
这篇文章是关于商业银行集团开发者圣诞日历的第24天的文章。
这是关于从Angular 4.4迁移到6.0的故事的后篇。
前篇请点击这里。
由于在前一部分中完成了Angular Update Guide任务，所以后一部分的重点是修改相关模块。
我所做的事情如下所述。
-
- nodeのバージョンアップ
-
- typescriptのバージョンアップ
-
- angularに関連するライブラリのバージョンアップ
- 構文修正
节点7.5升级至10.14.0
由于是从7版本升级过来，所以我一开始感到有些紧张，但最终只需在package.json中进行一些简单的调整就完成了。
- v7.10.1
+ 10.14.0
- @types/node: "^7.0.43",
- "node-sass": "^4.7.2",
+ @types/node: "^10.12.12",
+ "node-sass": "^4.10.0",
我使用 anyenv 工具来更改了 .node-version 文件，并更新了 package.json 文件。另外，我还更新了 DockerFile，但这部分内容我会省略。
将Typescript的版本从2.6.2升级至2.7.2。
在升级版本时出现了一个问题。可能是在tslint那一边发生的，但因为不知道是什么时候发生的，所以在这个部分解决。
- @Input() hide? = false;
+ @Input() hide?: boolean = false;
这是用于常见的显示切换的属性，但如果不指定可选变量的类型,
[tslint] missing whitespace (whitespace)
因为出现了错误，所以我进行了修正，明确了类型。
有关Angular相关库的版本升级
- "angulartics2": "^4.6.3",
- "@ngx-translate/core": "^8.0.0",
- "@ngx-translate/http-loader": "^2.0.0",
- "ngx-bootstrap": "^1.9.3",
- "ngc-webpack": "3.2.2",
+ "angulartics2": "^7.2.3",
+ "@ngx-translate/core": "^10.0.2",
+ "@ngx-translate/http-loader": "^3.0.1",
+ "@ngtools/webpack": "1.10.2",
+ "ngc-webpack": "4.1.2",
+ "ngx-bootstrap": "^3.1.3",
随着angular版本的升级，ngx-translate核心必须升级到10，http-loader必须升级到3。
对于ngx-bootstrap，angular6需要版本3才能兼容。
为了支持构建，我们将ngc-webpack升级到了4，并需要添加@ngtools/webpack。
语句修正
角度分析2
定义已经发生了以下变化。
export class AppComponent {
constructor(
- _angulartics2GoogleAnalytics: Angulartics2GoogleAnalytics,
+ angulartics2GoogleAnalytics: Angulartics2GoogleAnalytics,
) {
+ angulartics2GoogleAnalytics.startTracking();
}
}
import { Angulartics2Module } from 'angulartics2';
- import { Angulartics2GoogleAnalytics } from 'angulartics2/ga';
@NgModule({
imports: [
- Angulartics2Module.forRoot([ Angulartics2GoogleAnalytics ]),
+ Angulartics2Module.forRoot(),
管道
由于 locale 已经在管道中使用，因此在定义规范时必须注入 locale 数据，否则会导致错误。
import localeJa from '@angular/common/locales/ja';
import { DecimalPipe, registerLocaleData } from '@angular/common';
describe('DecimalPipe', () => {
beforeAll(() => {
registerLocaleData(localeJa);
});
const pipe = new new DecimalPipe('ja-JP');
最后
我很高兴地成功将Angular升级到6，这是通过上述的处理完成的。由于有Angular 6的更新指南，因此可以顺利进行升级。但根据每个项目添加了多少外部模块，升级的难度也会有所不同。
而且，如果最新版本是7或更高版本，不仅仅可以简单地将外部模块更新到最新版本，还需要确定与Angular 6兼容的版本。
为了减轻这种压力，我再次认识到持续更新是不可缺少的。
另外，对于正在努力从较低版本升级到最新版本的Angular开发者们，希望这对你们有所参考。
明天，我们公司的CTO @Kirika将负责最后一天的工作。请多多关照！
