Angular5：アップグレードと新機能の概要

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またはsubmitイベントではなく、blurまたはsubmitイベントでのみ有効性をチェックするようにAngularに指示することで、パフォーマンスを向上させることができます。デフォルトのchangeイベント。

たとえば、次のようなテンプレート駆動型のフォームがあるとします。

<form #newUserForm="ngForm" (ngSubmit)="onSubmit(newUserForm)">

  <label for="user-name">User Name:</label>
  <input type="text" placeholder="User name"
         required maxlength="25" id="user-name"
         [(ngModel)]="userName" name="userName">

  <button type="submit" [disabled]="!newUserForm.form.valid">
    Register
  </button>
</form>

入力に以下を追加して、入力がぼやけている場合にのみAngularがその有効性をチェックできるようになりました。

<input type="text" placeholder="User name"
      required maxlength="25" id="user-name"
      [(ngModel)]="userName" name="userName"
      [ngModelOptions]="{updateOn: 'blur'}">

フォーム全体にルールを一度に適用することもできます。

<form #newUserForm="ngForm"
      (ngSubmit)="onSubmit(newUserForm)"
      [ngFormOptions]="{updateOn: 'blur'}">
  ...
</form>

リアクティブフォームの場合、次のようなオプションを追加します。

ngOnInit() {
  this.newUserForm = this.fb.group({
    userName: ['Bob', { updateOn: 'blur', validators: [Validators.required] }]
  });
}

ルーターイベント

Angularルーターは、いくつかの新しいライフサイクルイベントを公開して、より詳細なレベルでイベントに簡単に対応できるようになりました。新しいイベントは次のとおりです： ActivationStart 、 ActivationEnd 、 ChildActivationStart 、 ChildActivationEnd 、 GuardsCheckEnd 、 GuardsCheckStart 、 ResolveStart 、およびResolveEnd。

@angular / service-worker

アプリへのサービスワーカーの追加を容易にする新しいパッケージ@angle / service-worker が、Angular5で利用できるようになりました。将来の投稿でそれを使用することをより深く掘り下げます。

アップグレード

重大な変更はほとんどないため、アップグレードは簡単です。 Angularチームは、アップグレードを可能な限り簡単にするために、便利なツールもまとめました。

アップグレードに役立つ可能性のあるいくつかのポインタを次に示します。これは、Angular4アプリからアップグレードすることを前提としています。

1つのコマンドですべてのAngularパッケージをアップグレードできます。

$ npm install @angular/{animations,common,compiler,compiler-cli,core,forms,http,platform-browser,platform-browser-dynamic,platform-server,router}@5.0.0

# or, using Yarn:
$ yarn add @angular/{animations,common,compiler,compiler-cli,core,forms,http,platform-browser,platform-browser-dynamic,platform-server,router}@5.0.0

Angular5はTypeScript2.4.2とRxJS5.5.2にも依存するようになったため、これらのパッケージもアップグレードする必要があります。
まだ行っていない場合は、プロジェクトを変更してくださいにタグを付ける。
AngularにFlexLayout を使用している場合は、以前のバージョンではを使用しているため、最新リリース（この記事の執筆時点ではベータ10）にアップグレードしていることを確認してください。 X191X] OpaqueToken 、Angular5で削除されました。
まだ行っていない場合は、http呼び出しをAngular4.3で導入された新しいHttpClientに移行し始めることができます。従来のHttpモジュールは廃止されました。
date 、 currency 、または Percent パイプを使用している場合、Angularは代わりにこれらのパイプに独自の実装を使用しているため、構文の変更が必要になる場合がありますブラウザのi18nAPIに依存することです。詳細については、変更ログのi18n部分を参照してください。
RxJS バージョン5.5も最近リリースされ、RxJSv5.5.2がAngular5アプリのデフォルトです。コードはまったく同じままですが、RxJSは lettable operator に移行して、ツリーの揺れを改善し、カスタム演算子の作成を容易にします。このため、監視可能なパイプラインコードを新しい構文に移行し始めることをお勧めします。

古い構文の簡単な例を次に示します。

import { Component, OnInit } from '@angular/core';

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/filter';
import 'rxjs/add/operator/do';

@Component({ ... })
export class AppComponent implements OnInit {
  myObs = Observable.of('Hello', 'Alligator', 'World!');

  ngOnInit() {
    this.myObs
      .do(x => console.log('The do operator is the do operator!'))
      .filter(x => x.length > 8)
      .map(x => x.toUpperCase())
      .subscribe(x => console.log(x));
  }
}

…そして、新しいlettable演算子構文を使用した同じ例は次のようになります。

import { Component, OnInit } from '@angular/core';

import { of } from 'rxjs/observable/of';
import { map, filter, tap } from 'rxjs/operators';

@Component({ ... })
export class AppComponent implements OnInit {
  myObs = of('Hello', 'Alligator', 'World!');

  ngOnInit() {
    this.myObs
      .pipe(
        tap(x => console.log('The do operator is now tap!')),
        filter(x => x.length > 8),
        map(x => x.toUpperCase())
      )
      .subscribe(x => console.log(x));
  }
}

単一のインポートステートメントからすべての演算子をインポートする方法と、pipeメソッドを使用して演算子を組み合わせる方法に注目してください。 lettable演算子を使用する場合、いくつかの演算子は名前を変更します。たとえば、do演算子はtapになります。

🎢これで、Angular 5に飛び込む準備が整い、結果として得られるより高速で小さなアプリの恩恵を受けることができます。