🅰️

Angular 11 から 12 への変更点メモ

2021/05/09に公開

はじめに

この記事は業務で開発している Angular アプリを近々リリースされる v12 に更新するにあたり、注意すべき変更点をまとめた自分用のメモです。

主な依存関係の変更
- TypeScript: 4.2
- Node.js: 12 - 15
- Zone.js: 0.11.4
Minified な UMD がbundleされなくなる
XhrFactory が @angular/common/http から @angular/common へ移動した
Root View が削除されたら DOM 要素も削除されるようになった
- Root View は ApplicationRoot ？ Bootstrap Module 削除するとルート要素もいなくなるらしい
@ViewChildren や @ContentChildren の QueryList の変更イベントが、中身に変更があったときのみに限定される
- emitDistinctChangesOnlyDefaultValue を false にすれば従来の挙動になる
- emitDistinctChangesOnly は非推奨となり、今後廃止される（おそらく v14 ）
FormGroup / FormArray の FormControl 追加、削除時に emitEvent パラメーターを渡せるようになった
input の min/max 属性でフォームバリデーションが実行されるようになる
- カスタムバリデーター属性を作っていた場合は要注意
  （二重にバリデーションが実行されるだけで実害は無いと思われるが）

Injectable の providedIn に forwardRef が使用できるようになる
- どの NgModule からprovide するかを選択できるようにしたかったらしい
HttpParams に boolean / number を使用できるようになった
BrowserAnimationModule.withConfig でアニメーションをオフにできるようになった
APP_INITIALIZER に Observable を渡せるようになった
RouterOutlet に自作クラスを使用できるようになった
- ionic で無理矢理使っていたので正式に対応したらしい
DatePipe に曜日フォーマットを渡せるようになった（ c/cc/ccc/cccc/ccccc/cccccc ）
ライブラリプロジェクトを Ivy 対応できるようになった
- 手元の Angular ライブラリプロジェクトに適用したところ問題は発生しなかった
  テンプレートコンパイル時のコンパイルエラーを直す方が大変

D&D のプレビューを表示している DOM 要素が追加される場所を変更できるようになった
- 以前は body の下の方に追加されていた。これだと CSS のあたり方などなど問題が発生するため、変更可能に。
Table に recycleRows が追加された。
- 内容が動的に変化する場合、指定するとパフォーマンスが良くなる？

SASS が大幅に変更された
- @use でモジュールとして使用する形に変更
- 各メソッドの名前やテーマオブジェクトの構造も変わっている。対応不可避。メンバーの再教育必須。

※Operator の変更は後でちゃんと確認する

TypeScript 4.2 に更新される
- Angular 12 で TS バージョンが 4.2 に更新されている。単体で使っている場合を除いて気になる変更では無い。
rxjs-compat のサポートが終了される
- RxJS 5 から 6 での pipe 変更を compat で回避したプロジェクトは変更必須
Observable.toPromise の Generics が <T> から <T | undefined> に変更される
- toPromise は使用頻度が高いためダメージが大きい。一旦は toPromise()! で回避予定。
Observable から lift が削除される（公開されなくなる）
Subscriber の Constructor の引数が変更される
- 従来の引数を使用する場合は Subscriber.create ファクトリメソッドを使用する

subscribeの引数が1つのものが推奨になる
- 実は RxJS 6.4 からだった
- hoge$.subscribe({ next: x => console.log(x), error: x => console.error(x), complete: console.log('complete') })