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

この記事は、[Business Bank Group Developers Advent Calendar](https://qiita.com/advent-calendar/2018/bbg_developers) 22日目の記事です。

---

こんにちはビジネスバンクグループの清水です。
今日は弊社のフロント開発環境のAngularを`v4.4`から`v6.0`にupdateした話をします。
（すでにstableは`v7.1.1`ですが、updateタスクを開始した時にまだ`v7`がリリースされていなかったこともあり、まずは`v6`にあげて行こう！！！となった経緯があります。）


### もともとの各種ライブラリのバージョン
 - Angular: 4.4.6
 - Node: 7.10.1
 - TypeScript: 2.6.2
 - Rxjs: 5.5.2

###目標
 - Angular: 6.0.0
 - AngularCLI: 6.0.0
 - Node: 8.0.0
 - TypeScript: 2.7.2
 - Rxjs: 6.0.0

アップデートタスクはAngular公式ドキュメンテーションにある[Angular Update Guide](https://update.angular.io/)にそって進めました。
そのため、Angular Update Guideのセクションごとに話を進めていきます。

### Before Updating
一番大きかった作業はHttpClientの移行です。これについては過去の記事に書いてますのでよかったら見てください。
[AngularのHttp -> HttpClientにした話](https://qiita.com/kyokoshimizu/items/f3bc83280260b9fffd6f)
それ以外は、ガイドにそって改修作業をすれば終了でした。

### During the Update
ここでの作業は大きく分けて4つです。

##### １）　Nodeのversion up
→　これについては後日 [@tronperidot](https://qiita.com/tronperidot) さんが話してくれる予定です
##### ２） AngularCLIのインストール
`npm install @angular/cli@6.0.0`でinstallをした際の作業は次になります。

```
npm uninstall angular2-elastic
npm uninstall angular2-masonry
```
それぞれ、Angularの新しいバージョンに追随していなかったため消しました。
masonryを使用したUIは今後も使用したいので、angular2-masonryの代わりに[ngx-masonry](https://www.npmjs.com/package/ngx-masonry)か[ng-masonry-grid](https://www.npmjs.com/package/ng-masonry-grid)を入れることを検討中です。
ngx-masonryはangular2-masonryをforkしたものなので、リプレース自体は簡単そうですが
> If I have the time I will look into further improvements, but please do not expect support as I don't have the time for that.

といっているのでng-masonry-gridで問題ないか試しているところです。

##### ３） Angular周りのライブラリupdate
`ng update @angular/core@6.0.0`をするために必要だった関連ライブラリupdateは次です。

```
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](https://www.npmjs.com/package/ng2-page-scroll)はdeprecatedになったので代わりに[ngx-page-scroll](https://www.npmjs.com/package/ngx-page-scroll)を入れました。入れ替えるだけで大きな変更点はなかったです。

##### ４） ReflectiveInjector
[ReflectiveInjector](https://angular.io/api/core/ReflectiveInjector)もdeprecatedになっていたので　`StaticInjector`へのリプレースを試みました。
ダイアログ部品周りでReflectiveInjectorを使用していたのですが、ダイアログ部品自体をAngularMaterialに移行するか検討中なためFIXMEコメントをつけて保留中です。
`ReflectiveInjector`のリプレース談があったら知りたいです。

ここまでで、AngularのupdateとCLIの導入が完了しました！

### After the Update
RxJSのupdate作業です。
[rxjs-tslint](https://www.npmjs.com/package/rxjs-tslint)をinstallして`rxjs-5-to-6-migrate`でRxJSの`v5`から`v6`へのmigrateを行いました。（CLIで生成したappでないためtsconfig.jsonです）

```
rxjs-5-to-6-migrate -p tsconfig.json
```
`v6`への変更点は色々ありますが、`rxjs-5-to-6-migrate`を使用すると基本的な修正は行ってくれるのでほぼほぼmigrate作業をする必要はありませんでした。

ただ、migrateによって追加されたimport文や意図しない空行が一行目に挿入されてしまったのでそれらは手作業で修正しました。（３００ファイルくらい）
<img width="1394" alt="スクリーンショット 2018-12-22 7.01.18.png" src="https://qiita-image-store.s3.amazonaws.com/0/238961/653a0d42-643b-2c31-a1e8-ae34e111b56a.png">

prettierでの修正も検討したのですがいい方法がわからなかったです。何か知見がある方がいたら教えていただきたいです。
また、`Observable.merge`や`Observable.create`を使用していた部分のmigrateがされなかった箇所があったので何点か手作業で修正しました。（migrateされなかった処理はリファクタしたほうがいいのかな、とちょっと思っています。）

### tslint
codelyzerのupdateにより消された下記ルールで使用していたものをtslintから削除しました。

```:tslint.json
no-access-missing-member
templates-use-public
template-to-ng-template
invoke-injectable
```
もともとblacklistに指定していた"rxjs"を消しました。

```:tslint.json
"import-blacklist": [
  true,
  "rxjs"
],
```

以上修正して、lintが通ることを確認しました。

### Angular6
上記作業が終了し**Angular6.0.0にアップデートすることができました！！！**

そう、、、アップデートすること**は**できました！！！！！
いざアプリをローカルでbuildしてみると**エラー**が、、😂😂😂😂
この続きの話は[@tronperidot](https://qiita.com/tronperidot) さんが`Angular4.4 -> 6.0 にした話（後編）`で話してくれる予定です。

### まとめ
今回のタスクで思ったことは、**最新バージョンに追随していくことの大切さ**です。
開発環境で使用しているバージョンと最新バージョンの幅が開くほど、updateタスクのコストがかかります。
何より、「新しく出たあれを使いたい！！けどバージョンが低くて対応してない、、」といった不甲斐ない気持ちにもなりません。
機能開発に追われてアップデートタスクのような改善作業は後回しになりがちですが、これらも優先タスクであるとチームの認識を合わせることが重要です。


明日は [@Akiyah](https://qiita.com/Akiyah) の担当です、お願いします！
また`Angular4.4 -> 6.0 にした話（後編）`も明後日に公開予定です、[@tronperidot](https://qiita.com/tronperidot) さんお願いします！