Angular6:アップグレードと新機能の概要

提供:Dev Guides
移動先:案内検索

Angular 6 がリリースされたばかりで、新機能の量は最小限ですが、ツールの面で多くの変更が加えられています。 新しいツールの追加は、アプリのアップグレードと新しいライブラリの追加を容易にするために特に優れています。 この投稿では、Angular 6の新機能について詳しく説明し、アプリをこの新しいバージョンにアップグレードする方法についても説明します。

追加と新機能

以下に、主な新しい追加の概要を示します。 このリストは完全なものではないことに注意してください。詳細については、結論リンクを参照してください。

ng更新&ng追加

Angular CLIは、updateaddの2つの主要な新しいコマンドを取得します。

ng updateを使用すると、Angularアプリを更新するのはコマンドだけです。 回路図面のおかげで、サードパーティのライブラリも新しいコマンドにフックして、それらのライブラリを簡単に更新できるようにすることもできます。 内部的には、コマンドはプロジェクトの package.json ファイルを処理し、プロジェクトのパッケージマネージャー(npmまたはYarn)を使用し、必要に応じてコード変換を適用して、必要に応じてコードまたは構成ファイルを更新します。

ng updateと同様に、新しいng addコマンドを使用すると、簡単なコマンドで新しいライブラリをプロジェクトに追加および構成できます。 たとえば、 Angular Material のインストールとセットアップにはかなりの手順が必要でしたが、今では1つのコマンドですべてを実行できます。

$ ng add @angular/material

ここでもngadd を使用すると、サードパーティのライブラリで独自の回路図面を作成できます。

その他のCLIの変更

CLIを使用するAngularプロジェクトには、これまで.angular-cli.jsonという構成ファイルがありました。 CLIのバージョン6では、このファイルの名前が angle.json に変更され、その構造も変更されています。

ng newは、デフォルトのアプリケーションでワークスペースを生成するようになりました。 ワークスペースにアプリを追加して、1つのプロジェクトに複数のアプリを含めることができます。 ライブラリも一級市民になり、ワークスペースに追加してCLIを使用して生成できます。

$ ng g library ng-fancy-lib

角度要素

Angular 6では、 Angular Elements の初期リリースを取得します。これは、カスタム要素として他のAngularプロジェクトに、そして最終的には他のフレームワークに埋め込むことができるコンポーネントの開発を容易にするプロジェクトです。または、バニラJavaScriptだけでも。

別の投稿でAngularElementsを見ていきますが、それまでの間、 AngularFirebaseのJeffDelaneyによるこのすばらしい紹介を見ることができます。

TypeScript 2.7&RxJS 6

Angular 6は、 TypeScript2.7とRxJS6に依存するようになりました。

RxJS 6には、新しくシンプルなインポートパスがあり、チェーン可能な演算子を使用せずに、パイプ可能な演算子を採用しています。 これにより、ライブラリ全体がツリーを揺るがしやすくなり、バンドルが小さくなります。 RxJS 6にはいくつかの重大な変更が含まれていますが、新しいパッケージ rxjs-compatをRxJS6と一緒にインストールして、コードを新しい構文にアップグレードする際に互換性レイヤーを提供できます。

主な新しいインポートパスを示すサンプルインポートを次に示します。

// creation and utility methods
import { Observable, Subject, pipe } from 'rxjs';
// operators all come from `rxjs/operators`
import { map, takeUntil, tap } from 'rxjs/operators';

ご覧のとおり、どこからインポートするかを覚えるのははるかに簡単です。 チェーン演算子とパイプ演算子については、次の違いの簡単な例を示します。

// before
myObs
  .do(console.log)
  .map(x => x * 2)
  .subscribe(x => {
    console.log('Value is', x);
  });

// after
myObs
  .pipe(
    tap(console.log),
    map(x => x * 2)
  )
  .subscribe(x => {
    console.log('Value is', x);
  });

doはJavaScriptの予約済みキーワードであるため、do演算子の名前がtapに変更されていることに注意してください。


アイビーレンダラー

最近、コード名Ivyのレンダラーの書き直しも大きな注目を集めています。 新しいレンダラーは大幅に小さくする必要があります。これにより、最終的なアプリのバンドルサイズを小さくすることができます。 安定したバージョンはまだ利用できませんが、APIが完全で安定したときに、オプトインの代替として利用できるようになります。

アップグレード

Angularチームは、Angularインストールを最新バージョンに簡単に移行できるツール Angular UpdateGuideをまとめました。 ほとんどの場合、アップグレードはそのガイドに従うことです。

それでも、AngularMaterialを使用するAngular5.2アプリをAngular6にアップグレードするために必要な手順の概要を以下に示します。

開始する前に、アプリが従来のHttpモジュールではなく新しいHttpClientモジュールをすでに使用していることを確認してください。


アプリがAngular5へのpeerDependencyを持つパッケージに依存している場合は、Angular6をサポートするようにパッケージが更新されるまで待つ必要があります。


CLIの更新

プロジェクトに対してグローバルおよびローカルの両方でAngularCLIのv6に更新します。

# updating using npm
$ npm i -g @angular/cli
$ npm i @angular/cli

# using Yarn
$ yarn global add @angular/cli
$ yarn add @angular/cli

ngupdateを実行しています

これで、CLI、Angularコア、およびAngularMaterialに対してng updateを実行できます。

まず、CLIを更新すると、構成ファイルが新しい形式( angle.json )に変換され、さまざまなプロジェクト構成が更新されます。

$ ng update @angular/cli

次に、Angularコアパッケージに対してng updateを実行します。

$ ng update @angular/core

次に、ng updateを実行して、AngularMaterialとRxJSを更新することもできます。

$ ng update @angular/material
$ ng update rxjs

引数なしでng updateを実行すると、コマンドで更新できるパッケージのリストが表示されます。


RxJSのアップグレード

RxJSの場合、インポートパスの構文を更新する必要があり、演算子はチェーンではなくパイプで接続する必要があります。 通常、これは、RxJSのインポートと演算子が使用されるすべての場所でコードを更新する必要があることを意味しますが、ありがたいことに、手間のかかる作業のほとんどを処理するパッケージrxjs-tslintがあります。

パッケージはグローバルにインストールできます。

$ npm i -g rxjs-tslint

# or, using Yarn
$ yarn global add rxjs-tslint

次に、プロジェクトのsrc[であるアプリのtsconfig.app.jsonファイルを指すrxjs-5-to-6-migrateコマンドを実行できます。 X155X]フォルダー:

$ rxjs-5-to-6-migrate -p src/tsconfig.app.json

コマンドを数回実行する必要がある場合があります。 重要なコードベースでは多くの変更が行われるため、すべてが良好に見えることを確認するためにgitdiffを確認する必要があります。


rxjs-tslint の作業が完了したら、テストを実行し、アプリを完全に実行して、発生したものをすべて修正する必要があります。 たとえば、ツールで見逃された可能性のあるRxJS 6の構文変更や、TypeScript2.7によって発生した新しいタイプエラーなどです。

すべてが良好に見えたら、プロジェクトからrxjs-compatパッケージを削除する必要があります(そのままにしておくと、アプリバンドルに不要な肥大化が追加されます)。

$ npm uninstall rxjs-compat

# or, using Yarn
$ yarn remove rxjs-compat

参考文献

最新の追加および移行手順をさらに深く掘り下げたい場合があります。 これを支援するための重要なリソースのいくつかを次に示します。