Ugo

Webエンジニアのためのプログラミング情報サイト

Angular 13の変更点をまとめ！コンパイルエンジン「Ivy」とTypeScript 4.4

Angular 13の変更点をまとめ！コンパイルエンジン「Ivy」とTypeScript 4.4

この記事では、2021年11月4日にリリースされた「Angular 13」の変更点をざっくりと分かりやすく説明する。

Angularはバージョン2のリリース以降、4カ月に一度のペースで定期的にアップデートが行われてきた。

今回のアップデートはマイナーアップデートだが、業務でAngularを使用している開発者なら抑えておきたい幾つかの変更が含まれている。

Angular13公式アナウンスメント（英語）
https://blog.angular.io/angular-v13-is-now-available-cce66f7bc296

https://twitter.com/angular/status/1456050398020653067

なお、Angularについて0から勉強したい人はこちらの記事を参考にしてほしい。

目次

Angular 13のおもな変更点

Angular 13のおもな変更点は以下の通りだ。

  • コンパイルエンジン「Ivy」の大幅強化と「View Engine」の廃止
  • TypeScript 4.4のサポート
  • Angular CLIのキャッシュ機能
  • Internet Explorer 11のサポートの廃止
  • フォームバリデーターのアップデート
  • コンポーネントAPIのアップデート

レンダリングエンジン「Ivy」の大幅強化

画像はmdedium.comより転載

ユーザに快適なアプリケーション体験を提供するために重要な鍵を握るのは、ユーザインタラクションの検知とレンダリングのスピードだ。

レンダリングエンジン「Ivy」はAngular 9.0がから導入された新しいレンダリングエンジンで、「Incremental-DOM」と呼ばれる技術を使用して画面が更新されるまでの時間を短縮している。

Angular 4から導入された「View Engine」はAngular 13で廃止となる。

TypeScript 4.4のサポート

Angular 13ではTypeScriptのバージョン4.4をサポートしており、それ以前のバージョンはサポートしていない。

TypeScritpのバージョンはAngularをバージョン13にアップデートすると自動でアップデートされる。

Angular CLIのキャッシュ機能

Angular CLI 13はキャッシュ機能が導入された。

これによりビルドに掛かる時間を68%向上させることができる。

キャッシュ機能はデフォルトでオンとなっているが、angular.jsonの設定にてオフにすることもできる。

"cli": {
  "cache": {
    "enabled": true,
    "environment": "all",
    "path": ".angular-cache"
  }
}

Internet Explorer 11のサポートの廃止

Angular 13ではInternet Expoloer 11のサポートを終了した。

IE関連のCSSなどはプロジェクトから取り除かれた。

なお、Internet Explorer 11を引き続きサポートしなければならないプロジェクトでは、Angular 12を引き続き使用することが推奨されている。

フォームバリデーターのアップデート

Angular 13では、Angularの特長のひとつであったバリデーションがさらにアップデートされた。

具体的には動的にバリデーションを有効・無効にするための8つの関数とフォームの状態を管理するFormControlStatusの定義がアップデートされている。

status:  string ➡ FormControlStatus
statusChanges: Observable<string> ➡ Observable<FormControlStatus>

FormControlStatus 'VALID' | 'INVALID' | 'PENDING' | 'DISABLED'
setValidators
addValidators
removeValidators
hasValidators

setAsyncValidators
addAsyncValidators
removeAsyncValidators
hasAsyncValidators

コンポーネントAPIのアップデート

以前のバージョンのAngularでは、動的にコンポーネントを生成する際にFactoryResolverクラスを使用する必要があり、冗長な記述をしなければならず煩わしかった。

AngularではFactoryRosolverを使用することなくコンポーネントの生成ができるようになった。

今までの動的なコンポーネント生成の例。

constructor(
	private _componentFactoryResolver: ComponentFactoryResolver,
	private _viewContainerRef: ViewContainerRef
) {}

ngOnInit(): void {
	const componetFactory = this._componentFactoryResolver.resolveComponentFactory(MyComponent);
	const component: MyComponent = this._viewContainerRef.createComponent(componetFactory);
}

Angular 13以降の動的なコンポーネント生成の例。

constructor(
	private _viewContainerRef: ViewContainerRef
) {}

ngOnInit(): void {
	const component = this._viewContainerRef.createComponent(MyComponent);
}

Angularのアップデート方法

Angularをバージョン13にアップデートする人はこちらのアップデートガイドに目を通したほうがいいだろう。

以下のページでは、アップデート前とアップデート後のAngularバージョンを指定することにより、必要なコマンドラインやその他、アップデートするべきファイルなどを教えてくれる。

https://update.angular.io（英語）

MENU