Angular 5 、 pentagonal-donut という名前のコードが発表されたばかりで、Angularアプリをより小さく、より高速に実行するためのいくつかの新機能といくつかの内部変更が含まれています。 この投稿では、最も重要な変更のいくつかと、アップグレードのヒントについて簡単に説明します。 詳細については、お知らせブログ投稿を参照してください。すべての変更の詳細については、公式変更ログを参照してください。
パフォーマンス
アプリをより小さく、より速くするためにAngular5に含まれる変更の一部を次に示します。
- Angular CLI v1.5 も本日リリースされ、デフォルトで有効になっているビルドオプティマイザーが付属しています。 ビルドオプティマイザーは、ツリーの揺れの改善など、ビルドに対して一連の追加の最適化を実行します。
- Angularコンパイラも改善され、ビルドと再構築が高速化されました。 現在、内部でTypeScript変換を使用しています。
ng serveコマンドで--aotフラグを使用して、開発時に事前ビルドとインクリメンタルビルドが可能になりました。 これは、CLIの将来のバージョンでデフォルトになるはずです。 - intlおよびReflectポリフィルは不要になり、バンドルが小さくなります。 ReflectポリフィルはJITモードでも必要であることに注意してください。
- テンプレートコードから重要でない空白文字を削除する新しいオプションpreserveWhitespacesがあります。これにより、アプリの最終的なバンドルサイズをさらに減らすことができます。 このオプションはデフォルトでオフになっています。グローバルtsconfig.jsonファイルにルールを追加し、オプションを false の値に設定することで、アプリ全体で簡単にオンにできます。 ]：
tsconfig.json
{
"compileOnSave": false,
"compilerOptions": {
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es5",
"typeRoots": ["node_modules/@types"],
"lib": ["es2017", "dom"]
},
"angularCompilerOptions": {
"preserveWhitespaces": false
}
}
コンポーネントごとにオプションをきめ細かく設定したり、特定のコンポーネントでのみプロジェクトのデフォルトを上書きしたりすることもできます。
app.component.ts
import { Component } from '@angular/core';
新機能
updateOnぼかしまたは送信
フォームフィールドまたはフォーム全体の新しいオプションであるupdateOnは、blur
