実装に関連するAngular 13の新機能
次に、Angular 13の実装に関連した新機能を説明していきます。
動的なコンポーネントの追加がよりシンプルに
Angular 13では、Web画面上に動的にコンポーネントを追加できます。ボタンを押すごとにコンポーネントが増える図6のサンプルで説明します。
コンポーネントが動的に追加される<div>要素（詳細はサンプルコード参照）に付与するappDynamicComponentディレクティブは、Angular 12ではリスト11の通り実装します。（1）のコンストラクターで、子要素に対応するviewContainerRefと、コンポーネントを生成するために必要なcomponentFactoryResolverを依存性注入で受け取ります。（2）では、componentFactoryResolver.resolveComponentFactoryメソッドで取得するcomponentFactoryを引数にしてviewContainerRef.createComponentメソッドを実行します。
@Directive({
selector: '[appDynamicComponent]'
})
export class DynamicComponentDirective {
// コンストラクター ...（1）
// （依存性注入でviewContainerRef、componentFactoryResolverを受け取る）
constructor(private viewContainerRef: ViewContainerRef,
private componentFactoryResolver: ComponentFactoryResolver) {
}
// コンポーネントを追加 ...（2）
createSubComponent() {
const componentFactory
= this.componentFactoryResolver.resolveComponentFactory(SubComponent);
this.viewContainerRef.createComponent(componentFactory);
}
}
Angular 13ではこの記述が、リスト12の通りシンプルになります。コンストラクター（1）でcomponentFactoryResolverを受け取る必要がなくなり、（2）ではcreateComponentメソッドにコンポーネントクラス（SubComponent）を直接指定できます。
@Directive({
selector: '[appDynamicComponent]'
})
export class DynamicComponentDirective {
// コンストラクター ...（1）
// （依存性注入でviewContainerRefを受け取る）
constructor(private viewContainerRef: ViewContainerRef) {
}
// コンポーネントを追加 ...（2）
createSubComponent() {
this.viewContainerRef.createComponent(SubComponent);
}
}
インラインフォント展開のAdobe Fonts対応
Angularでは、参照したWebフォントをビルド時にインライン展開して実行速度を向上できます。Angular 12まではGoogle Fontsに対応していましたが、Angular 13からはAdobe Fontsに対応しました。各フォントを利用する図7のサンプルで説明します。
「ng build」でビルド後のindex.htmlでは、図8の通り、Google FontsとAdobe Fontsの指定がインライン展開されます。展開前の記述はサンプルコードを参照してください。
Angular Materialのアクセシビリティ（accecibility、a11y）対応
Angular Materialは、現在MDC Webのコンポーネントと統合作業中で、統合後はアクセシビリティが改善する見込みです。例えば、現状のAngular Materialを利用した図9のサンプルでは、ラジオボタン（<mat-radio-button>）が縦に詰まって表示されます。
新しいAngular Materialを試すには、「npm install @angular/material-experimental」でパッケージを導入後、モジュールを参照するapp.modules.tsでリスト13の通り、MatRadioModuleの参照先を変更します。
// import { MatRadioModule } from '@angular/material/radio'; // 変更前
import { MatRadioModule } from '@angular/material-experimental/mdc-radio'; // 変更後
変更後のWebページでは、図10の通り、ラジオボタンの間隔が広がります。
Angular 12・13のそのほかの変更点
これまで紹介してきた以外の変更点を、以下に列挙していきます。詳細は公式アナウンスのブログ記事（Angular12、Angular 13）を参照してください。
Ivyへの移行
次世代ビューエンジン「Ivy」への移行は進み、従来の古い「View Engine」は、Angular 12では非推奨に、Angular 13では非サポートになりました。Angularパッケージ形式を定める「Angular Package Format」も、View Engine関連の記述を削除して更新されました。
Protractorの将来を検討中
テストフレームワークProtractorは、将来的に別のライブラリーで置き換えることが検討されています。Angular 12以降の新規プロジェクトではProtractorは利用されません。
ドキュメントの更新
Angularの更新に合わせて、ドキュメントや動画とリソースが整備されました。
ビルドやツールに関する細かい変更
Angular 12において、以下の変更が行われました。
- ng buildのデフォルトがproductionビルドに変更
- 型チェックをより厳密に行うStrictモードがデフォルト有効に変更
- Visual Studio Code用拡張機能「Angular Language Service」で、Ivy対応がデフォルト有効に変更
- Angular 11で実験的に導入されたWebpack 5が正式サポート
テストのteardown対応
単体テストの実行時、それぞれのテスト終了後にブラウザのDOMをクリアする設定がAngular 12.1でオプションとして導入され、13ではデフォルトで有効になりました。
IE11は非推奨から非サポートへ
IE11は、Angular 12で非推奨、Angular 13で非サポートとなりました。
フレームワークの変更
RxJSはAndroid 13で7.4に、TypeScriptはAngular 12で4.2、Angular 13では4.4になりました。
コミュニティからの変更点
Angularコミュニティから提案された改善を随時取り入れています。
まとめ
本記事では、2021年5月にリリースされたAngular 12と、11月にリリースされたAngular 13について、変更点や追加機能を説明しました。おおむね半年に1回のペースでメジャーリリースが行われ、フレームワークとしての完成度を高めています。
