Angular 5.1 とその他のリリース
この記事はAngular公式ブログ Angular 5.1 & More Now Availableを元に翻訳、加筆したものです。
Angular version 5.1.0のリリースをお知らせします。これはいくつかの小さな機能とバグ修正を含むマイナーリリースです。また、Angular CLIのv1.6とAngular Materialの最初の安定リリースをリリースしています。
変更点
- Angular MaterialとCDK の安定版リリース
- CLIでのService Workerサポート
- CLIでのUniversalとAppShellサポートの改善
- デコレータのエラーメッセージの改善
- TypeScript 2.5サポート
機能の完全な一覧とバグ修正については、Angular、Material、およびCLIの変更ログを参照してください。
Angular MaterialとCDKの安定版リリース
11のアルファリリース、12のベータリリース、3つのリリース候補の後、Angular MaterialとAngular CDKの完全な5.0.0リリースと、CDKがAngular Labsを卒業できたことをうれしく思います。 Googleのマテリアルデザインビジュアル言語に基づいて、Angular MaterialはAngularアプリケーション用に30個のUIコンポーネントを提供します。 Angular CDK（Component Dev Kit）は、一般的な課題に何度も対応する必要のない、独自のカスタムコンポーネントを構築するのに役立つ一連のビルディングブロックを提供します。これらのコンポーネントは、Googleアナリティクススイート、Google Cloud Platformデベロッパーコンソール、Googleショッピングエクスプレスなど、いくつかのGoogleアプリケーションで既にプロダクションで使用されています。
このリリースからAngular MaterialはAngularと同じSemVerの考え方に従います。Angular MaterialとAngular CDKのメジャーバージョンは他のプラットフォームのメジャーバージョンと同時にリリースされます。パッチのリリースは週ごとのリズムに従いますが、機能が完了するとマイナーな機能リリースが利用可能になります。
ドキュメンテーション、デモ、およびスタートガイドについては、material.angular.ioをご覧ください。また、ライブラリの今後の変化はGitHubの進捗状況から追跡できます。今後数か月間は新しいマットツリー、バーチャルスクロール、コンポーネントテストハーネス、ドラッグ＆ドロップヘルパーなどの機能に注目してください。
CLI 1.6 Service Workerサポート
パフォーマンスは常にウェブ開発者にとって重要な目標でした。そしてそれは、今日の不安定なWiFiとモバイル接続の世界では特に重要です。現代のブラウザには、Service Worker APIと呼ばれる、信頼性が高く迅速にロードされるサイトを構築するための新しいAPIがあります。
Angular 5.0.0には、Angularアプリケーション向けにカスタマイズされた新しいService Worker実装が付属しています。Angular CLI 1.6には、この新しい機能を利用するアプリケーションの構築がサポートされています。@angular/service-workerを使用すると、APIをサポートしているブラウザでアプリケーションの読み込みパフォーマンスを向上させることができ、アプリケーションの読み込み体験をネイティブにインストールされたアプリケーションのようにすることができます。
Angular Service Workerを開始する方法についてはドキュメンテーションを参照してください。
CLI 1.6 Universalの改善 & App Shellサポート
またAngular CLI 1.6のリリースでは、App Shellのサポートだけでなく、Schematicsを介して既存のプロジェクトにUniversalを追加するためのサポートが強化されています。
Angular Universal
現在のCLIアプリケーションにUniversalを追加するには、プロジェクトで次のコマンドを実行します:
ng generate universal <name><name>はアプリケーションに付けたい任意の名前に置き換えてください。これにより、現在のアプリケーションを使ってUniversalモジュールが作成され、自動的に angular-cli.json ファイルが構成されます。ここからは、Universalの利用ガイドの手順4に進むことができます。
Universalアプリをビルドするには、次のコマンドを実行してください:
ng build --app=<name>App Shell
追加されたもう一つの機能は、App Shellのサポートです。App Shellを生成・ビルドして、 index.htmlにあるアプリケーションの静的なファーストレンダリングを作成できます。これにより、アプリケーションがブートストラップされている間、ユーザーはより良いエクスペリエンスを得ることができます。
まず、アプリケーションの NgModule に RouterModule をインポートし、アプリケーションコンポーネントのテンプレートに <router-outlet></router-outlet>をインポートします。 App Shellはルータを使用してアプリケーションをレンダリングします。
その後、次のコマンドを実行します。
ng generate app-shell [ --universal-app <universal-app-name>] [ --route <route>]引数で渡されたUniversalアプリケーションを使用して、App Shellのサポートを angular-cli.json のメインアプリケーションに追加します。Universalアプリケーションが渡されない場合は、Universalのschematicを最初に実行してUniversalアプリケーションを作成します。 route引数はビルドの間に用いるルートを指定します（ルータはApp Shellのサポートに必要です）。デフォルトでは /shell です。
この手順の後、ng buildを使用してアプリケーションを通常どおりビルドし、index.htmlファイルには自動的にレンダリングされたアプリケーションからのルートが含まれます。
デコレータエラーメッセージの改善
コンパイラによって出力される診断は、特にデコレータにサポートされていない表現や不正確な表現が含まれている場合には大幅に改善されました。
たとえば、関数を呼び出してテンプレートを生成することはサポートされていません。
以前はこのようなエラーが発生しました。
Error encountered resolving symbol values statically. Calling function ‘genTemplate’, function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol MyComponent in components.ts, resolving symbol MyComponent in components.tsこのエラーは改善され、問題の原因と性質が明らかになりました。
component.ts(9,16): Error during template compile of 'MyComponent'.
Function calls are not supported in decorators but 'genTemplate' was called.TypeScript 2.5 サポート
すべての開発者に推奨されるTypeScript 2.5のサポートが追加されました。このリリースには、いくつかの便利で高度な機能が含まれています。
yarn add typescript@'~2.5.3'またはnpm install typescript@'~2.5.3'を実行してTypeScriptをアップグレードできます。
このアップデートはオプショナルで、Angular 5.x.xではTypeScript 2.4が引き続きサポートされています。まだTypeScript 2.6はサポートしていません。将来のマイナーリリースでサポートを追加する予定です。
注意: あなたのコードがInjector.get(Token)を使用していて、Tokenが静的なメンバを持っている場合、Tokenではなく{}が返される問題が発生します。代わりにInjector.get<Token>(Token)によって正しい戻り値の型を取得できます。
