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

2 min read読了の目安(約2500字

はじめに

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

Angular 12.0

主な破壊的変更点

  • 主な依存関係の変更
    • 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 ライブラリプロジェクトに適用したところ問題は発生しなかった
      テンプレートコンパイル時のコンパイルエラーを直す方が大変

Angular CDK 12.0

主な破壊的変更点

主な機能追加、バグ修正

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

Angular Material 12.0

主な破壊的変更点

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

主な機能追加、バグ修正

  • Table に Row を再利用できる recycleRows Directive が増えた
  • TabGroup にフォーカスするタブを選択できる focusTab メソッドが増えた(引数はタブのインデックス)

RxJS 7.0

※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 ファクトリメソッドを使用する

https://rxjs-dev.firebaseapp.com/deprecations/breaking-changes

主な重要変更点

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

https://rxjs-dev.firebaseapp.com/deprecations/subscribe-arguments