Angular 5.0 の魔法

いえいえ、Angular をご存知ですか? Angular1 はまだあまり馴染みのない方も多いですが、Angular5 がリリースされましたので、今日は Angular5 が以前のバージョンと比べてどのような変更点があるのか​​を紹介したいと思います。

ビルド オプティマイザー

5.0.0 以降、CLI 経由で実行される製品ビルドはデフォルトでビルド オプティマイザーを使用します。

ビルド オプティマイザーは、Angular アプリケーションの理解に基づいてビルドされたパッケージを小さくできる CLI のツールです。

オプティマイザーの構築には 2 つの主なタスクがあります。まず、アプリケーションの特定の部分を純粋としてマークし、既存のツールがそれを使用して「ツリー シェイク」の最適化効果を向上させ、アプリケーションから不要なものを削除できるようにします。

次に、ビルド オプティマイザーはアプリから Angular デコレーター コードを削除します。デコレーターはコンパイラーによってのみ使用され、実行時には使用されないため、削除できます。上記の最適化により、生成される JS パッケージのサイズが削減され、アプリケーションの起動が高速化されます。

Angular Universal state transfer API と DOM のサポート

これにより、サーバーとクライアントの間でアプリケーションの状態を共有することが容易になります。

Angular Universal は、開発者がサーバーサイド レンダリング (SSR) を実行するのを支援するプロジェクトです。サーバーサイド レンダリングによって生成される HTML は、JS をサポートしていないスパイダーやクローラーにとって使いやすく、ユーザーが知覚するパフォーマンスの向上にも役立ちます。

5.0.0 では、開発チームは ServerTransferStateModule と対応する BrowserTransferStateModule を追加しました。このモジュールは、開発者がサーバー側のレンダリングによって生成されたコンテンツに関連情報を追加し、それをクライアントに送信して繰り返し生成を避けるのに役立ちます。これは、データが HTTP 経由で取得されるシナリオに役立ちます。状態をサーバーからクライアントに転送することにより、開発者は 2 回目の HTTP リクエストを行う必要がなくなります。ステータス移行に関する文書は数週間以内にリリースされる予定です。

Angular Universal チームは、プラットフォーム サーバー Domino もプラットフォーム サーバーに追加しました。 Domino は、サーバー側環境ですぐに使用できる DOM 操作をさらにサポートしており、これにより、サーバー側以外のサードパーティ JS およびコンポーネント ライブラリのサポートが向上します。

コンパイラの改善

インクリメンタル コンパイルをサポートするために、Angular コンパイラを改善しました。その結果、特に製品ビルドと AOT ビルドの再構築が加速され、その効果がより顕著になります。また、空白を削除してパッケージ サイズを削減するためにデコレータも強化しました。

TypeScript 変換

さて、Angular コンパイラーの基礎となる動作メカニズムは TypeScript 変換であり、増分リビルドがはるかに高速になります。 TypeScript 変換は、標準の TypeScript コンパイル パイプラインに飛び込むことができる TypeScript 2.3 の新機能です。

AOT タグを開いた状態で、ngserve を実行することで上記のメカニズムを使用できます。

ng サーブ --aot

皆さんにも試してみることをお勧めします。この設定は、将来、CLI のデフォルトになります。多くのプロジェクトでは、数千のコンポーネントに関連するパフォーマンスの問題が発生しており、あらゆる規模のプロジェクトがこれらの改善の恩恵を受けることを願っています。

新しいコンパイラー パイプラインは、

https://angular.io の増分 AOT ビルドを実行するときにビルド時間を 95% 節約します (開発マシンでのテストでは 40 秒以上から 2 秒未満までかかりました)。

私たちの目標は、開発者が開発に使用できる程度に AOT コンパイルを高速化することです。現在は 2 秒未満になっているため、将来の CLI では AOT がデフォルトで有効になる可能性があります。

この変換への移行のステップとして、genDir は必要なくなり、outDir も変更されました。今度は、パッケージ用に生成されたすべてのファイルを node_modules に入力します。

空白を保持する

以前は、コンパイラはタブ、改行、および空白を忠実に再現してテンプレートに含めていました。コンポーネントやアプリケーションに空白を含めるかどうかを選択できるようになりました。

この設定は各コンポーネントのデコレーターで指定でき、現在のデフォルト値は true です。

@Component({
  templateUrl: 'about.component.html',
  preserveWhitespaces: false
}
export class AboutComponent {}

または、tsconfig.json でグローバルに構成することもできます。デフォルト値も true です。

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "baseUrl": "./",
    "module": "es2015",
    "types": []
  },
  "angularCompilerOptions": {
    "preserveWhitespaces": false
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ]
}

一般的なルールは、コンポーネント レベルの設定がアプリケーション レベルの設定をオーバーライドする必要があるということです。開発チームは、デフォルトで開発者のスペースを節約するために、将来的にデフォルト値を false に変更する予定です。

 タグについては心配する必要はありません。コンパイラはそれらをインテリジェントに処理します。 <p></p>デコレータのサポートが改善されました<p></p>、Lambda およびオブジェクト リテラル useValue、useFactory、およびデータ デコレータでの式の降格がサポートされるようになりました。これにより、実行時に評価できるデコレータでのみ下げることができる値を使用できるようになります。 <p><a href="http://www.php.cn/wiki/81.html" target="_blank">これで、名前付き関数の代わりに Lambda 関数を使用できるようになりました。つまり、コードを実行しても、d.ts や外部 API には影響しません。 </a><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false">Component({
  provider: [{provide: SOME_TOKEN, useFactory: () => null}]
})
export class MyClass {}

ログイン後にコピー

useValue の一部として式も劣化させます。

Component({

Provider: [{provide: SOME_TOKEN, useValue: SomeEnum.OK}]

})

エクスポート クラス MyClass {}

国際化された数値、日付、通貨のパイプ

数値、日付と通貨のパイプにより、クロスブラウザーの国際化がより便利になり、i18n ポリフィルを使用する必要がなくなります。

在以前版本的Angular中，我们一直依赖浏览器及其i18n API提供数值、日期和货币格式。为此，很多开发者都在使用腻子脚本（polyfill），而结果也不好。很多人反馈说一些常见的格式（如货币）不能做到开箱即用。

而在5.0.0中，我们把这个管道更新成了自己的实现，依赖CLDR提供广泛的地区支持，而且可配置。以下是我们对v4和v5所做的比较：a document comparing the pipe behavior between v4 and v5。

如果你还没条件使用新管理，可以导入DeprecatedI18NPipesModule以降级到旧的行为。

StaticInjector代替ReflectiveInjector

为了消除对更多腻子脚本（polyfill）的依赖，我们用StaticInjector代替了ReflectiveInjector。前者不再需要Reflect，为开发者减少了应用大小。

以前

ReflectiveInjector.resolveAndCreate(providers);

以后

Injector.create(providers);

提升Zone的速度

一方面提升了Zone的速度，另一方面也可以在特别关注性能的应用中绕过它。

若要绕过它，启动应用时加上noop：

platformBrowserDynamic().bootstrapModule(AppModule, {ngZone: 'noop'}).then( ref => {} );

这里有一个完整的例子：the example ng-component-state project。

exportAs

组件和指令中增加了对多名称的支持。这有助于用户实现无痛迁移。通过把指令导出为多个名称，可以在不破坏原有代码的情况下在Angular语法中使用新名称。Angular Material项目已经在其前缀迁移项目中用上了，对其他组件作者肯定也有用。

示例

@Component({
  moduleId: module.id,
  selector: 'a[mat-button], a[mat-raised-button], a[mat-icon-button], a[mat-fab], a[mat-mini-fab]',
  exportAs: 'matButton, matAnchor',
  .
  .
  .
}

HttpClient

v4.3在@angular/common中推出过HttpClient，用于在Angular中发送请求，它小巧易用。HttpClient受到了开发者的广泛赞誉，因此我们推荐在所有应用中使用它，放弃之前的@angular/http library。

要升级HttpClient，需要在每个模块的@angular/common/http中把HttpModule替换为HttpClientModule，注入HttpClient服务，删除所有map(res => res.json())。

CLI v1.5

从Angluar CLI v1.5开始，已经开始支持Angluar v5.0.0，默认生成v5项目。

在这次小版本升级中，我们默认打开了构建优化器，让开发者拿到更小的包。

我们还修改了使用.tsconfig文件的方式，以更严格地遵守TypeScript标准。此前，如果检测到延迟加载的路由，而且你在tsconfig.json中手工指定了一组files或include，那这些路由会自动化处理。而如今，根据TypeScript规范，我们不再这么干了。默认情况下，CLI对TypeScript的配置中没有files或include，因此多数开发者不会受影响。

Angular表单添加updateOn Blur/Submit

这样可以根据blur或submit来运行验证和更新值的逻辑了，不必再单纯依赖input事件。

表单对应用很重要，如果有服务端验证，或者验证或更新值会触发较慢的操作，你当然希望它少跑几次。现在你可以在控件层面控制验证和更新值的时机了，也可以在表单层面设置。

此外，你现在可以直接在选项中指定asyncValidators，而不是通过第三个参数指定。

模板驱动的表单

以前

<input name="firstName" ngmodel=""/>

以后

<input name="firstName" ngmodel=""/>

或者

<form [ngFormOptions]="{updateOn:&#39;submit&#39;}">

反应式表单

以前

new FormGroup(value);
new FormControl(value, [], [myValidator])

以后

new FormGroup(value, {updateOn: 'blur'}));
new FormControl(value, {updateOn: 'blur', asyncValidators: [myValidator]})

RxJS 5.5

我们已经把使用的RxJS更新到5.5.2或更高版本。这个新发布的RxJS可以让开发完全摆脱之前导入机制的副作用，因为我们以新的lettable operators的方式使用了RxJS。这些新操作符消除了副作用，以及之前导入操作符中“patch”方法存在代码切割和“tree shaking”等问题。

不再这样:

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/filter';
names = allUserData
.map(user => user.name)
.filter(name => name);

现在这样:

import { Observable } from 'rxjs/Observable';
import { map, filter } from 'rxjs/operators';
names = allUserData.pipe(
  map(user => user.name),
  filter(name => name),
);

此外，RxJS现在发行了一个使用ECMAScript Modules的版本。新Angular CLI会默认拉取这个新版本，让包大小有明显减小。如果你没使用Angular CLI，那还是应该指向这个新版本。相关文档在此：Build and Treeshaking。

新的路由器生成周期事件

我们给路由器添加了新的生命周期事件，让开发者可以跟踪running guard启动到激活完成的各个阶段。这些事件可在有子组件更新时，在一个特定的路由器出口上展示加载动画，或者测量性能。

新的事件（按顺序）是GuardsCheckStart、ChildActivationStart、ActivationStart、GuardsCheckEnd、ResolveStart、ResolveEnd、ActivationEnd、ChildActivationEnd。以下是一个使用这些事件启动和停止加载动画的示例：

class MyComponent {
  constructor(public router: Router, spinner: Spinner) {
    router.events.subscribe(e => {
      if (e instanceof ChildActivationStart) {
        spinner.start(e.route);
      } else if (e instanceof ChildActivationEnd) {
        spinner.end(e.route);
      }
    });
  }
}

如何更新

こちらは Angular 更新ガイドです。このガイドでは、プロセス全体と更新前に行うべきこと、アプリケーションを更新して Angular の将来のバージョンに備える手順について説明します。

以前に非推奨となった多くの API (OpaqueToken など) を削除し、いくつかの新しい非推奨項目も発表しました。これらの変更については、上記のガイドで詳しく説明されています。

既知の問題

現在、ソース マップに関連する既知の問題があります。一部のソース マップは「未定義のソース」エラーを報告します。

公式の紹介文は次のとおりです: Angular 5.0.0 - Pentagonal Donut のリリースを発表できることを嬉しく思います!これは別のメジャー バージョンで、新機能が含まれ、多くのバグが修正されています。これは、Angular をより小さく、より速く、より使いやすくするという私たちの一貫した目標を再度反映しています。また、新しいバージョンにできるだけ早く慣れたいと考えています。現在のソフトウェアの更新が速すぎる場合は、そのバージョンに適応する必要があります。

関連書籍:

Angular における APP_INITIALIZER の役割を理解する

angular2 パッケージを使用して Android APP 環境を構築する方法

AngularJs フォーム検証方法

以上がAngular 5.0 の魔法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。