NgUpgradeを使用してAngularJSからAngularにアップグレードする方法

序章

Angular（2+）がここにあり、私たちは皆それについて非常に興奮しています。ただし、一部のユーザーにとっては、大規模なAngularJS（1.x）コードベースを引き続き使用しています。アプリケーションを新しいバージョンのAngularに移行するにはどうすればよいですか？特に、完全な書き直しのために機能開発から6か月かかる余裕がない場合はどうでしょうか？

そこで、ngUpgradeライブラリが登場します。 ngUpgradeは、アプリケーションを少しずつ移行できるようにする公式ツールです。ゆっくりとアップグレードする必要がある限り、AngularをAngularJSコードと並べて実行できます。

このガイドでは、ngUpgradeとAngularをインストールしてセットアップします。次に、コンポーネントの書き換えの基本を学びます。

（PS このガイドの長さがあなたを驚かせても、心配しないでください。これらすべてを詳細にカバーするUpgradingAngularJS と呼ばれる段階的な超詳細なビデオプログラムを作成しました。）

前提条件

このチュートリアルを完了するには、次のものが必要です。

Node.jsはローカルにインストールされます。これは、Node.jsのインストール方法とローカル開発環境の作成に従って実行できます。

このチュートリアルは、ノードv14.4.0、npm v6.14.5、angular v1.6.6、および@angular/commonv5.2.11で検証されました。

ステップ1—プロジェクトを開始する

ngUpgradeの使用を開始するには、アプリケーションがいくつかの前提条件を満たしている必要があります。

（タイプではなく）機能別に編成されたコードで、すべてのファイルに含まれるアイテムは1つだけです（ディレクティブやサービスなど）。
TypeScriptの設定
モジュールバンドラーの使用（ほとんどの人はWebpackを使用します）
AngularJS 1.5+を使用し、コントローラーをコンポーネントに置き換えます

ただし、今のところ、GitHubでコースサンプルプロジェクトを複製またはフォークするのに少し時間がかかります。

git clone https://github.com/upgradingangularjs/ordersystem-project.git

プロジェクトディレクトリに移動します。

cd ordersystem-project

このコミットをチェックアウトして、開始点を確認してください。

git checkout fdfcf0bc3b812fa01063fbe98e18f3c2f4bcc5b4

ngUpgradeを介して作業するために使用できる注文システムプロジェクトがあります。このコミットから、アプリケーションは上記のすべての基準を満たしています。コンポーネントアーキテクチャ、TypeScript、およびWebpackを使用しています（開発と本番の両方のビルドもあります）。

注：多くの大規模なAngularJSアプリでは、すべてを新しいGitリポジトリに移動して、何年もの歴史を一掃することはできません。また、CLIとは異なるアプリ構造を使用している可能性があります。アップグレードにCLIを使用できる場合は、遠慮なく使用してください。ただし、このガイドでは、アップグレードを完全に制御できるように、ここで手動セットアップについて説明します。

ステップ2—AngularとngUpgradeをインストールする

Angular、ngUpgrade、およびすべてのピア依存関係をインストールする準備が整いました。サンプルプロジェクトでは、先に進み、package.json依存関係配列を次のように更新します。

package.json

"dependencies": {
    "@angular/common": "^5.2.5",
    "@angular/compiler": "^5.2.5",
    "@angular/core": "^5.2.5",
    "@angular/forms": "^5.2.5",
    "@angular/platform-browser": "^5.2.5",
    "@angular/platform-browser-dynamic": "^5.2.5",
    "@angular/router": "^5.2.5",
    "@angular/upgrade": "^5.2.5",
    "angular": "1.6.6",
    "angular-route": "1.6.6",
    "bootstrap": "3.3.7",
    "core-js": "^2.5.3",
    "jquery": "^2.2.4",
    "lodash": "4.17.4",
    "moment": "~2.17.1",
    "reflect-metadata": "^0.1.12",
    "rxjs": "^5.5.6",
    "zone.js": "^0.8.20"
}

（サンプルプロジェクトではバージョン4を使用していますが、このシリーズではAngular 5を使用しますが、手順は同じです。）

これらのパッケージすべてを、保存フラグを使用してターミナルの1つの長いコマンドに入れることができますが、これらの各パッケージが何であるかを説明するために時間をかけます。

まず、@angular名前空間の下にあるライブラリです。

@angular/common：これらは、Angularに一般的に必要なサービス、パイプ、およびディレクティブです。このパッケージには、バージョン4.3以降の新しいHttpClientも含まれているため、@angular/httpは不要になりました。
@angular/compiler：これはAngularのテンプレートコンパイラです。テンプレートを取得し、アプリケーションを実行およびレンダリングするコードに変換します。あなたはそれと対話する必要はほとんどありません。
@angular/core：これらは、すべてのアプリケーションに必要なAngularの重要なランタイム部分です。これには、メタデータデコレータ（Component、Injectableなど）、すべての依存性注入、OnInitなどのコンポーネントライフサイクルフックなどがあります。
@angular/forms：これは、テンプレートであろうとリアクティブであろうと、フォームに必要なすべてです。
@angular/platform-browser：これは、DOMとブラウザーに関連するすべてのものであり、特にDOMのレンダリングに役立つ部分です。これは、bootstrapStaticを含むパッケージです。これは、本番ビルド用にアプリケーションをブートストラップするために使用する方法です。
@angular/platform-browser-dynamic：このパッケージには、クライアントでテンプレートをコンパイルするアプリケーション用のプロバイダーと別のブートストラップメソッドが含まれています。これは、開発中にブートストラップに使用するパッケージであり、別のビデオで2つの間の切り替えについて説明します。
@angular/router：ご想像のとおり、これはAngularのルーターにすぎません。
@angular/upgrade：これはngUpgradeライブラリであり、AngularJSアプリケーションをAngularに移行できます。

すべてのAngularパッケージの後に、Angularの依存関係であるpolyfillパッケージが付属しています。

core-js：グローバルコンテキストまたはウィンドウにES6またはES2015の特定の機能をパッチします。
reflect-metadata：これはAngularがクラスで使用するアノテーション用のポリフィルライブラリです。
rxjs：これは、データの処理に使用するすべてのオブザーバブルを含むライブラリです。
zone.js：これはZone仕様のポリフィルであり、Angularが変更検出を管理する方法の一部です。

使用しているTypeScriptのバージョンに関連する競合が発生する場合があります。これは、RxJS、Angularコンパイラ、またはWebpackが原因である可能性があります。奇妙なコンパイルエラーが発生し始めた場合は、調査を行って、使用しているバージョンに特定のバージョン範囲のTypeScriptが必要であることを確認してください。

ターミナルcdをプロジェクトのpublicフォルダーに開きます。

cd public

そして、npmを使用して依存関係をインストールします（必要に応じて、 Yarn をインストールして使用できます）。

npm install

すべてのパッケージがインストールされていることがわかります。

これで、AngularJSとAngularの両方をデュアルブートすることで、アプリケーションをハイブリッドアプリケーションにする準備が整いました。

ステップ3—ngUpgradeを設定する

ngUpgradeを設定するには、AngularJSとAngularを並行して実行できるようにするための一連の手順を実行する必要があります。

`index.html`からのブートストラップの削除

最初に行う必要があるのは、index.htmlからブートストラップディレクティブを削除することです。これは、AngularJSが通常ページの読み込み時に起動される方法ですが、ngUpgradeを使用してAngularを介してブートストラップします。したがって、index.htmlを開いて、そのdata-ng-appタグを削除するだけです。（独自のアプリで厳密なDIを使用している場合は、この手順でng-strict-diも削除します。）

index.htmlファイルは次のようになります。

public / src / index.html

<html>
  <head>
    <title>Amazing, Inc. Order System</title>
  </head>
  <body>
      <navigation></navigation>
      <div class="container" ng-view></div>
  </body>
</html>

AngularJSモジュールの変更

ここで、AngularJSモジュールにいくつかの変更を加える必要があります。 app.tsを開きます。

最初に行う必要があるのは、app.tsの名前をapp.module.ajs.tsに変更して、AngularJSのモジュールであることを反映することです。ちょっと長い名前ですが、Angularではファイル名にタイプを入れたいと思います。ここではapp.moduleを使用しており、そのajsを追加して、Angularのルートapp.moduleではなくAngularJS用であることを指定しています（これは、 2番目）。

アプリが現在のように、AngularJSを使用しているだけなので、ここにすべてのインポートステートメントがあり、すべてをAngularモジュールに登録しています。ただし、これから行うことは、このモジュールをエクスポートし、新しいAngularモジュールにインポートして、起動して実行することです。

したがって、28行目でアプリ名の文字列定数を作成しましょう。

public / src / app.module.ajs.ts

const MODULE_NAME = 'app';

次に、angular.module宣言でアプリ文字列をモジュール名に置き換えます。

public / src / app.module.ajs.ts

angular.module(MODULE_NAME, ['ngRoute'])
// component and service registrations continue here

そして最後に、定数をエクスポートする必要があります。

public / src / app.module.ajs.ts

export default MODULE_NAME;

この時点で、app.module.ajs.tsに加えられた変更は、このdiffに似ているはずです。

Angularアプリモジュールの作成

AngularJSモジュールの準備ができたので、Angularモジュールを作成する準備が整いました。次に、AngularJSモジュールをインポートして、ここで手動でブートストラップできるようにします。これが、2つのフレームワークを一緒に実行し、ngUpgradeがそれらの間のギャップを埋めることを可能にするものです。

最初に行う必要があるのは、app.module.tsと呼ばれるAngularJSモジュールと同じレベルで新しいファイルを作成することです。これで初めて、アップグレード全体でなじみのあるパターンが表示されます。クラスの作成とエクスポート、アノテーションによる装飾、すべての依存関係のインポートです。

新しいアプリモジュールで、AppModuleという名前のクラスを作成しましょう。

public / src / app.module.ts

export class AppModule {
}

次に、最初のアノテーション（デコレータとも呼ばれます）を追加しましょう。アノテーションは、Angularがアプリケーションを構築するときに使用するメタデータのほんの一部です。新しいクラスの上で、NgModuleアノテーションを使用し、オプションオブジェクトを渡します。

public / src / app.module.ts

@NgModule({})
export class AppModule {
}

Visual Studio Codeのようなエディターをフォローしている場合、TypeScriptはNgModuleが何であるかを知らないため、私たちに腹を立てていることがわかります。これは、Angularコアライブラリからインポートする必要があるためです。デコレータの上で、これを次のように修正できます。

public / src / app.module.ts

import { NgModule } from '@angular/core';

ここで、ngModuleのoptionsオブジェクトで、インポートの配列を渡す必要があります。 imports配列は、このNgModuleが依存する他のNgModuleを指定します。（これらのインポートは、ファイルの先頭にあるTypeScriptインポートとは異なります。）今のところ、BrowserModuleとUpgradeModuleが必要です。

public / src / app.module.ts

import { NgModule } from '@angular/core';

@NgModule({
    imports: [
        BrowserModule,
        UpgradeModule
    ]
})
export class AppModule {
}

もちろん、ファイルの先頭にもインポートされていないので、それも行う必要があります。最初のインポート後、次を追加できます。

public / src / app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { UpgradeModule } from '@angular/upgrade/static';

upgradeとupgrade/staticの両方にUpgradeModuleがあります。 staticを使用するのは、エラーレポートが改善され、AOT（事前）コンパイルで機能するためです。

Angularセットアップ用のルートモジュールの基本的なスキャフォールディングがあり、ブートストラップ自体を実行する準備ができています。

Angularモジュールでのブートストラップ

アプリケーションをブートストラップするには、最初に行う必要があるのは、コンストラクター関数を使用してUpgradeModuleを挿入することです。

public / src / app.module.ts

constructor(private upgrade: UpgradeModule){
}

コンストラクター関数では何もする必要はありません。次に行うことは、doBootstrap関数をオーバーライドすることです。コンストラクターの後に、次のように入力します。

public / src / app.module.ts

ngDoBootstrap(){
}

次に、UpgradeModuleのブートストラップ関数を使用します。 Angularブートストラップ関数と同じシグネチャを持っていますが、それは私たちのためにいくつかの追加のことをします。まず、AngularとAngularJSが正しいゾーンで実行されていることを確認してから、AngularJSをAngularで表示し、AngularをAngularJSで表示できるようにする追加のモジュールを設定します。最後に、テスト容易性APIを適応させて、Protractorがハイブリッドアプリで動作するようにします。これは非常に重要です。

追加しましょう：

public / src / app.module.ts

ngDoBootstrap(){
  this.upgrade.bootstrap(document.documentElement, [moduleName], {strictDi: true});
}

最初にdocument要素を渡し、次にAngularJSモジュールを配列内に渡します。最後に、この例を確認できるように、厳密な依存性注入をオンにできるように構成オブジェクトを追加します。

moduleNameがどこから来たのか不思議に思うかもしれません。他のインポートステートメントと一緒にインポートする必要があります。

public / src / app.module.ts

import moduleName from './app.module.ajs';

完成したapp.module.tsファイルは次のようになります。

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { UpgradeModule } from '@angular/upgrade/static';
import moduleName from './app.module.ajs';

@NgModule({
    imports: [
        BrowserModule,
        UpgradeModule
    ]
})
export class AppModule {
    constructor(private upgrade: UpgradeModule) { }

    ngDoBootstrap(){
        this.upgrade.bootstrap(document.documentElement, [moduleName], {strictDi: true});
    }
}

これは、時間の経過とともにあなたに馴染みのあるパターンになるでしょう。

`main.ts`を作成しています

AngularJSモジュールとAngularモジュールがセットアップされたので、これら2つをまとめてアプリケーションを実行するためのエントリポイントが必要です。 srcフォルダの下にmain.tsという名前の新しいファイルを作成しましょう。

main.tsでは、いくつかのものをインポートし、AngularにロードするAngularJSのバージョンを指示してから、Angularモジュールをブートストラップするように指示する必要があります。まず、2つのポリフィルライブラリとAngularのplatformBrowserDynamic関数をインポートする必要があります。

public / src / main.ts

import 'zone.js';
import 'reflect-metadata';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

なぜplatformBrowserではなくplatformBrowserDynamicなのですか？ Angularには、動的オプションと静的オプションの2つのコンパイル方法があります。動的オプション（ジャストインタイム、またはJITと呼ばれる）では、Angularコンパイラーはブラウザーでアプリケーションをコンパイルしてから、アプリを起動します。静的オプション（事前またはAOTと呼ばれる）は、より高速に起動するはるかに小さなアプリケーションを生成します。これは、Angularコンパイラがビルドプロセスの一部として事前に実行されるためです。ここでは、Webpack開発サーバーとともにJITメソッドを使用します。

次に、AngularモジュールとAngularJSモジュールの両方をインポートする必要があります。また、使用するAngularJSのバージョンをAngularに指示するメソッドもインポートする必要があります。

public / src / main.ts

import { setAngularLib } from '@angular/upgrade/static';
import * as angular from 'angular';
import { AppModule } from './app.module';

これを完了するには、setAngularLibを呼び出して、バージョンのAngularJSを渡す必要があります。また、platformBrowserDynamicを呼び出して、アプリモジュールをブートストラップするように指示する必要があります。

完成したファイルは次のようになります。

public / src / main.ts

import 'zone.js';
import 'reflect-metadata';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { setAngularLib } from '@angular/upgrade/static';
import * as angular from 'angular';
import { AppModule } from './app.module';

setAngularLib(angular);
platformBrowserDynamic().bootstrapModule(AppModule);

これでセットアップが完了したので、構成内のWebpackエントリポイントを変更する必要があります。

Webpackの更新

うまくいけば、ハイブリッドアプリケーションをブートストラップするこのプロセスがあなたにとって意味のあるものになり始めています。エントリポイントであるmain.tsファイルがあります。このファイルは、AngularJSライブラリをセットアップし、Angularモジュールをブートストラップします。次に、AngularモジュールがAngularJSモジュールをブートストラップします。それが、両方のフレームワークを互いに並行して実行させようとするものです。

これで、Webpack構成を変更して、アプリモジュールファイルの1つではなく、main.tsファイルで開始するようになりました。 webpack.common.js を開きます（webpack-configsフォルダーの下にあります）。 entryのmodule.exportsで、アプリのルートをmain.tsに変更します。

public / webpack-configs / webpack.common.js

entry: {
    app: './src/main.ts',
}

アプリケーションのテスト

これで、ハイブリッドアプリケーションの動作を確認する準備が整いました。ターミナルを開いて次のコマンドを実行すると、開発サーバーを実行できます。

# ensure that you are in the `ordersystems-project` directory
cd server
npm install
npm start

2番目のターミナルセッションで、次のコマンドを実行します。

# ensure that you are in the `ordersystems-project` directory
cd public
npm run dev

Webpackが読み込まれ、TypeScriptが正常にコンパイルされていることがわかります。

localhost:9000でブラウザをチェックしてみましょう。アプリケーションがまだ開発サーバーで実行されていることがわかります。

バージョンによっては、コンソールにcore-jsに関する警告がいくつか表示される場合がありますが、心配する必要はありません。影響はありません。 [ネットワーク]タブを開いて、ベンダーバンドルとアプリバンドルを確認することもできます。

ベンダーバンドルは絶対に巨大であり、それは次の理由によるものです。

Webpack開発サーバーを実行しています。つまり、何も縮小されていません。
動的コンパイルでAngularを実行しているため、コンパイラコードもブラウザに送信されます。

AOTコンパイルについて説明するときにこれをダウンストリームで修正しますが、ここをナビゲートして、すべてのデータがまだロードされていることを確認できます。

これで、AngularとAngularJSが並行して実行されます。これは、ハイブリッドアプリケーションを正常にセットアップしたことを意味します。これは、アプリケーションを1つずつアップグレードする準備ができていることを意味します。

ステップ4—最初のコンポーネントの書き換えとダウングレード

アプリケーションをブートストラップしてハイブリッドモードで実行しているので、アプリケーションの各部分の移行を開始する準備が整いました。一般的なアプローチの1つは、ルートを選択してから、依存関係が最も少ないものから始めて、下から上に向かって各部分を書き直すことです。これにより、アプリケーションを繰り返しアップグレードできるため、途中のすべてのポイントで、本番環境にデプロイできるものが得られます。

ホームルートだけで簡単にできるので、ホームルートから始めましょう。まず、ホームコンポーネントの名前をhome.tsからhome.component.tsに変更します。

次に、HomeコンポーネントをAngularクラスとして書き直す必要があります。最初に行う必要があるのは、ファイルの先頭にあるAngularコアライブラリからComponentをインポートすることです。