[Release Note] Angular 16.2.0リリース! 新たなテスト用APIの追加や、SSRへの展望など
先日2023年8月10日に、Angular 16のマイナーバージョンアップ v16.2.0 が無事リリースされました!
リリースノートは次のリンクから参照できます。
feat
を中心に、リリース内容を見ていきましょう!
機能追加(feat)アップデート
動的にコンポーネントの差し替えなどを可能にするNgComponentOutlet
。
従来は@Input
によるバインディングを行えませんでしたが、今回のアップデートでこれが可能になりました。
<!--
/** StandaloneなComponentならそのまま使える。 */
myComponent = MyComponent;
/** `Record<string, unknown>`型で、@Inputに指定されている値を一括で渡す。 */
inputsExpression = { title: 'Hello', data: { id: 1, name: 'A' } };
--->
<ng-container *ngComponentOutlet="myComponent; inputs: inputsExpression;">
</ng-container>
初期化後にngSrcを変更可能にする (#50683)
こちらの報告にある通り、従来はngSrcを利用した描写の再変更ができなかったようですが、このコミットにより動的なngSrcの変更に対応しました。
@scopeクエリ内のセレクタをスコープ化 (#50747)
W3Cでワーキングドラフトになっている@scope
ルールのサポートが入ったようです。
afterRenderおよびafterNextRenderを追加 (#50607)
開発者プレビューとして、afterRender
/afterNextRender
関数が追加されました。
これは、Signalsでのライフサイクルを実現するためのもので、ハイドレーションの文脈も考慮されているようです。
インジェクタデバッグAPIを作成 (#48639)
DI関連のデバッグを手助けするための、3つのAPI(getDependenciesFromInstantiation
/getInjectorProviders
/getInjectorParent
)が追加されました。
-
getDependenciesFromInstantiation
: インジェクタと、そのインジェクタによってインスタンス化されたトークンから、該当の注入されたすべてのサービスを検出する -
getInjectorProviders
: インジェクタで設定されているすべてのプロバイダを検出する -
getInjectorParent
: 指定したインジェクタの親を検出する
Injector.createでProvider型をサポート (#49587)
Injector.create
関数は、従来StaticProvider
しか受け付けなかったのですが、これにProvider
型が渡せるようになりました。
RouterTestingHarnessのfixtureをpublicに (#50280)
RouterTestingHarness
を利用したテストを行う際、ハーネスのCopmonentFixture
がprivate修飾子に設定されていたため、アクセスできず不便だったのが解消されました。
[Angular CLI] esbuildによるビルドや、SSRなどのSchematics対応(の準備?)
- アプリケーションビルダーにssrオプションを追加
- アプリケーションビルダーの初期実装を追加
- esbuildを使用したサーバーバンドル生成の初期サポートを追加
- アプリケーションビルダーにpre-rendering(SSG)とApp-shellサポートのgenerateを追加
- アプリケーションビルダーを使用するときにdev-serverでSSRを提供するサポートを追加
「@nguniversal
ではなく@angular/cli
でSSRをサポートする」という課題への対応が進んでいます。
ビルドフローにも影響があるため「esbuild/vite対応」の実装も一緒に行われています。
また、これに先駆けてSSG(Prerender)の機能がCLIから利用できるようになりました!
しかし、まだ移行のためのジェネレータが提供されていないので、angular.json
などに適切な記述を自身で行わなければいけません。
esbuildでビルドしたファイルをサービングする際、最適にpreloadするファイルをブラウザに伝えるための情報が含まれるようになりました。
修正・パフォーマンス(fix/perf)アップデート
他にも、機能追加以外の修正やパフォーマンス改善など、次のようなアップデートがありました。
-
Release v16.2.0 · angular/angular
-
fix(benchpress): correctly report GC memory amounts (#50760)
- benchpressによって報告されるGCメモリに不正があったため、正確なメモリ使用量が報告されるよう修正
-
fix(compiler-cli): libraries compiled with v16.1+ breaking with Angular framework v16.0.x (#50714)
- v16.1.0で作成されたlibraryがv16.0.xで正常に動作しなかった問題の修正
-
fix(core): handle hydration of view containers for root components (#51247)
- rootコンポーネントにViewContainerRefが挿入される場合など、適切にハイドレーションが行われるよう修正
-
fix(benchpress): correctly report GC memory amounts (#50760)
-
Release v16.2.0 · angular/angular-cli
-
fix(@angular-devkit/build-angular): correctly load dev server assets with vite 4.4.0+
- Vite 4.4.0+で、開発サーバーのアセットのロードに関する問題を修正
-
fix(@angular-devkit/build-angular): ensure preload hints for external stylesheets are marked as styles
- externalなスタイルシートのヒントが、preload時に正しくマークされていなかった問題の修正
-
fix(@angular-devkit/build-angular): ensure that server dependencies are loaded also in ssr entrypoint
- SSRのentrypointで、サーバーの依存関係が正しくロードされるように修正
-
fix(@angular-devkit/build-angular): prevent race condition in setting up sass worker pool
- sassワーカープールの設定における競合状態を防ぐための修正
-
fix(@angular-devkit/build-angular): Set chunk names explicitly
- ビルドプロセスでのチャンク名を明示的に設定するよう修正
-
perf(@angular-devkit/build-angular): filter postcss usage based on content in esbuild builder
- esbuild使用時、postcssの処理が必要ないスタイルシートはpostcssのステップをスキップする
-
perf(@angular-devkit/build-angular): inject Sass import/use directive importer information when resolving
- sassファイル内のパッケージベースのインポート参照解決の最適化
-
perf(@angular-devkit/build-angular): only load browserslist in babel preset if needed
- supportedBrowsersオプションが指定されている場合にのみ、browserslistパッケージがBabelアプリケーションプリセットでロード
-
perf(@angular-devkit/build-angular): use in-memory Sass module resolution cache
- esbuildでsassファイルをビルドする際、モジュールの解決試行をメモリ内でキャッシュする
-
fix(@angular-devkit/build-angular): correctly load dev server assets with vite 4.4.0+
Discussion