とあるPRJにて、Angular 10 → 12のUpdateの際にいくつかハマったので備忘録として残しておきます。

ざっくり環境

Angular 10 → 12
Node.js 12.10 → 12.22
TypeScript 3 → 4
webpack 4 → 5
...その他もろもろ

前提

・Angularのビルダーを変更

地道なバージョンアップ対応

Angularのバージョンアップに伴いNode.jsのバージョンも最低限上げないといけないなどその辺りの依存関係の調整を地道に行い、TypeScriptのバージョンアップに伴う既存ソースの微修正など対応した。そこまではよかったのですが。。。

webpack 5系の罠

今回のAngularプロジェクトでは直接的にwebpackは使用していませんでしたが、custom-webpackなどAngularで使うパッケージにwebpackへの依存があり、webpack 4系から5系にアップデートされていました。
結果、画面が真っ白！？！！？！！

polyfillの調整

これまでの開発でwebpackの存在など一ミリも気にしていなかっただけに、原因特定にハマってしまいました。。
下記の記事には大変お世話になりました本当にありがとうございます🙇‍♂️
https://blog.hiroppy.me/entry/webpack5

Node.jsのpolyfillの自動挿入が廃止

はい、Node.jsさんこれまでお手数をおかけし申し訳ございません。
下記を参考に、既存ソースで使っているpolyfillを特定しました。
https://github.com/webpack/node-libs-browser
どうやらutil、processあたりでエラーとなっているみたいだったので、polifills.tsに追加して無事解決、、、Chromeでは

闇のIE 11対応

（心の声） ------------------------------------------------------------
いや〜、あと先短いIE 11ですがまだ使っているのですね、
そもそもAngular 12ってIE非推奨になっているのですが。。
これまでもIEのAngular部品（nz-zorroとか）に対する描画レスポンスの悪さは露呈してたじゃないですか、もう不毛な争いはやめましょうよ。。
------------------------------------------------------------ここまで
とか思いながら、健気に調査・対応しました。
結論として（運良く）、polifills.tsにcore-jsを追加するだけでうまく動いてくれました。
（polifills.tsの書き方が悪くて（importするところをrequireしてたりして）zone.jsとコンフリクトしたりもしましたが、無事解消できました）
angular 13へのアップデートでIE対応させるのは（本当に）厳しい！！！！と思います。

結論

IEはもう安らかに眠らせてあげましょう。

読みにくい長文を最後まで閲覧いただき、ありがとうございました🙇‍♂️
良い開発を😄