Angular 製のアプリを Angular v9 系にアップデートした

拙作の Angular 製のアプリを Angular v9 系にアップデートした。

• https://github.com/Neos21/garbler
• https://github.com/Neos21/angular-utilities
• https://github.com/Neos21/neos-hatebu
• https://github.com/Neos21/ngx-markdown-wiki
• https://github.com/Neos21/wiki

基本は Angular Update Guide に沿ってやっていけば良いが、メジャーバージョンが2つ以上上がるパターン (v7 から v9 など) は色々とうまくいかないことがあるので要注意。v6 → v7、v7 → v8、v8 → v9 と、段階的にアップデートするのが良いと思う。

Garbler・Angular Utilities・Neo's Hatebu は v7 系だったので、ほとんど ug update でなんとかなった。Garbler が一番シンプルな構成だったので、このプロジェクトで発生したファイルの変更 (package.json や tsconfig.json など) を他のプロジェクトにも当てていった感じ。

ngx-markdown-wiki とそれを使った Neo's Wiki は v6 系で、移行がうまく行かなさそうだったので、ng new で新規プロジェクトを作り、そこに移植することにした。Renderer は完全に廃止され Renderer2 になっているし、DOCUMENT は import 元が @angular/common に変わっていたりする。こういうのはエラーを見て都度書き換える感じで。

global is not defined みたいな実行時エラーは、polyfills.ts に (window as any).global = window; を入れて対応する。

• 参考 : Angular6で"global is not defined"が出た時の回避策 ｜ Developers.IO

ブラウザで実行されている Angular アプリに対して、Angular のバージョンを確認する方法があったので紹介しておく。

開発者コンソールを開いて getAllAngularRootElements()[0].attributes["ng-version"]; と実行すると、Angular のバージョンが分かる。

• 参考 : angular5 - How can I check which version of Angular from browser? - Stack Overflow

以上。最近ちょっとフロントエンドから離れていたので、こういう泥臭いアップデート作業が懐かしい。