Angular4.4 -> 6.0 にした話（後編）

この記事は、Business Bank Group Developers Advent Calendar 24日目の記事です。

---

Angularを4.4から6.0へ移行した話の後編です。
前編はこちらになります。

前編でAngular Update Guideタスクを終えているので、後編では関連モジュールの修正がメインとなっています。

実際にやったことは以下になります。

• nodeのバージョンアップ
• typescriptのバージョンアップ
• angularに関連するライブラリのバージョンアップ
• 構文修正

node 7.5 -> 10.14.0

7からのバージョンアップだったので身構えていましたが、package.jsonのくらいで終わりました。

.node-version

- v7.10.1
+ 10.14.0

package.json

- @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の方だと思いますがいつ発生したのかわかってなかったのでここのセクションで。

foo.component.ts

- @Input() hide? = false;
+ @Input() hide?: boolean = false;

ありがちな表示切り替え用のプロパティですが、optionalの変数に型を指定しないと

[tslint] missing whitespace (whitespace)

とエラーが出たので、型を明示するように修正しました。

angularに関連するライブラリのバージョンアップ

package.json

- "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はcoreが10, http-loaderは3出ないといけません。
ngx-bootstrapもangular6だと3が必要。
ビルドに対応するためにngc-webpackを4にあげましたが、それに関連して@ngtools/webpackを追加する必要がありました。

構文修正

Angulartics2

定義が次のように変わりました。

app.modules.ts

export class AppComponent {
  constructor(
-   _angulartics2GoogleAnalytics: Angulartics2GoogleAnalytics,
+   angulartics2GoogleAnalytics: Angulartics2GoogleAnalytics,
  ) {
+   angulartics2GoogleAnalytics.startTracking();
  }
}

src/app/app.module.ts

import { Angulartics2Module } from 'angulartics2';
- import { Angulartics2GoogleAnalytics } from 'angulartics2/ga';

@NgModule({
   imports: [
-     Angulartics2Module.forRoot([ Angulartics2GoogleAnalytics ]),
+     Angulartics2Module.forRoot(),

Pipe

localeがpipeで持つようになったので、specの定義時に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にすることができました。
Angular6のupdate Guideがあるためスムーズに進められるところもありますが、プロダクトによって外部モジュールをどれだけ追加しているかによってアップデートのしんどさは変わります。
まして、最新が7などさらに上がある状態だと、外部モジュールを単純に最新にすればいいわけではなく、Angular6で動くバージョンを特定する必要があります。
そういうストレスを軽減するためにも継続したアップデートは不可欠だと改めて感じました。
また、同様にAngularの低いバージョンからアップデートを行おうと切磋琢磨している人たちへの参考になれれば幸いです。

明日、最終日は弊社CTOの @Kirika さんが担当いたします。よろしくお願いします！