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

投稿日: 2022-04-20 2022-10-22
タグ: Angular, javascript

序章

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

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

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

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

前提条件

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

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

このチュートリアルは、Nodev14.4.0で検証されました。 npm v6.14.5、 angular v1.6.6、および @angular/common v5.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に一般的に必要なサービス、パイプ、およびディレクティブです。このパッケージには、新しいパッケージも含まれています HttpClient バージョン4.3以降、不要になりました @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：これはゾーン仕様のポリフィルであり、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 ルートではなくAngularJS用であることを指定します app.module Angularの場合（これはすぐに作成します）。

アプリが現在のように、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がそれらの間のギャップを埋めることを可能にするものです。

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

新しいアプリモジュールで、という名前のクラスを作成しましょう 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';

あります UpgradeModule 両者に upgrade と upgrade/static. 使いたい static 1つは、より優れたエラーレポートを提供し、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、いくつかのものをインポートし、AngularJSのどのバージョンをロードするかをAngularに指示してから、Angularモジュールをブートストラップするように指示する必要があります。まず、2つのポリフィルライブラリとAngularをインポートする必要があります platformBrowserDynamic 関数：

public / src / main.ts

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

どうして platformBrowserDynamic ただの代わりに platformBrowser? 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の設定を変更して、 main.ts ファイルであり、アプリモジュールファイルの1つではありません。 webpack.common.js を開きます（ webpack-configs フォルダ）。下 module.exports 為に entry、アプリのルートを次のように変更します 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クラスとして書き直す必要があります。最初に行う必要があるのはインポートです Component ファイルの上部にあるAngularコアライブラリから：

public / src / home.component.ts

import { Component } from '@angular/core'

次に行うことは、関数を変換することです homeComponentController クラスに。それを大文字にして削除することもできます controller 名前の最後にあるので、 HomeComponent. 最後に、括弧を削除しましょう。今は次のようになっています。

public / src / home.component.ts

class HomeComponent {
    var vm = this;
    vm.title = 'Awesome, Inc. Internal Ordering System';
}

それでは、クラス内の内容をクリーンアップしましょう。の宣言はもう必要ありません vm クラスを使用しているので。次のプロパティを追加することもできます title 文字列として、タイトルをコンストラクター関数に設定して移動します。私たちのクラスは今次のようになっています：

public / src / home.component.ts

class HomeComponent {
    title: string;
    constructor(){
        title = 'Awesome, Inc. Internal Ordering System';
    }
}

私たちもする必要があります export このクラスを削除してから削除します export default ライン。

今、私たちは適用する必要があります Component これがコンポーネントであることをAngularに伝えるためにインポートしたメタデータデコレータ。 Homeコンポーネントオブジェクトをコンポーネントデコレータとオプションオブジェクトに置き換えることができます。

public / src / home.component.ts

@Component({
}

コンポーネントデコレータの最初のオプションは、 selector. これは、このコンポーネントを参照するために使用するHTMLタグであり、「ホーム」になります。 Angularでは、セレクターは文字列リテラルであることに注意してください。これは、キャメルケースでコンポーネントに名前を付けてから、ハイフンを使用してHTMLタグに変換するAngularJSとは異なります。ここでは、使用したいタグを正確に配置します。この場合、それを「ホーム」に保持しているだけなので、それほど重要ではありません。その後、指定します template、AngularJSで行ったのと同じように、 template: template. 信じられないかもしれませんが、それだけです。完成したコンポーネントは次のようになります。

public / src / home.component.ts

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

const template = require('./home.html');

@Component({
    selector: 'home',
    template: template
})
export class HomeComponent {
    title: string;
    constructor(){
        this.title = 'Awesome, Inc. Internal Ordering System';
    }
}

注：AOTコンパイラを使用するアプリケーションで作業している場合は、 templateUrl ここで行っていることの代わりに、Webpackにいくつかの変更を加えます。ただし、これはJITと開発サーバーにとってはまったく問題ありません。

AngularJSのコンポーネントのダウングレード

次に、ngUpgradeライブラリを使用してこのコンポーネントを「ダウングレード」する必要があります。「ダウングレード」とは、AngularコンポーネントまたはサービスをAngularJSで利用できるようにすることを意味します。一方、「アップグレード」とは、AngularJSコンポーネントまたはサービスをAngularで利用できるようにすることを意味します。これについては別の記事で説明します。幸いなことに、ダウングレードは非常に簡単です。

まず、インポートとともにファイルの先頭で2つのことを行う必要があります。インポートする必要があります downgradeComponent Angularアップグレードライブラリの関数は、と呼ばれる変数を宣言します angular したがって、このコンポーネントをAngularJSモジュールに登録できます。これは次のようになります。

public / src / home.component.ts

import { downgradeComponent } from '@angular/upgrade/static';
declare var angular: angular.IAngularStatic;

コンポーネントのダウングレードはかなり簡単です。コンポーネントの下部で、このコンポーネントをディレクティブとして登録します。ディレクティブ名を渡します。これは home、この場合のセレクターと同じです。その後、パスします downgradeComponent ngUpgradeからの関数。この関数は、AngularコンポーネントをAngularJSディレクティブに変換します。最後に、このオブジェクトを次のようにキャストします angular.IDirectiveFactory. 完成した登録は次のようになります。

public / src / home.component.ts

app.module('app')
  .directive('home', downgradeComponent({component: HomeComponent} as angular.IDirectiveFactory);

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

これで、AngularJSアプリケーションで使用できるダウングレードされたAngularコンポーネントができました。 AngularJSモジュールのTypeScriptファイルにインポートして登録するのではなく、なぜこのディレクティブをこのファイルの下部に登録したのか不思議に思うかもしれません。最終的な目標は、すべてのアプリケーションが変換されたらそのファイルを完全に削除することです。そのため、AngularJSをアンインストールするときに、そのファイルから徐々にファイルを削除し、最終的には完全に削除します。これは、サンプルアプリケーションや迅速な移行に最適です（これについては後ほど詳しく説明します）。

さあ、開いてください app.module.ajs.ts のインポートを削除します homeComponent Line12およびLine37のコンポーネント登録。

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

AOTコンパイルに関するクイックノート

ダウングレードのこの方法（ダウングレードされたコンポーネントをコンポーネントファイルに登録し、AngularJSモジュールファイルから削除する）は、開発や、デプロイする前にアプリケーションをすばやく書き直す予定の場合に最適です。ただし、本番用のAngularAOTコンパイラはこのメソッドでは機能しません。代わりに、AngularJSモジュールにダウングレードされたすべての登録が必要です。

ダウングレードは同じですが、代わりに次のようにします。

輸入 downgradeComponent の app.module.ajs.ts （あなたはすでに持っています angular そこにあるので、宣言する必要はありません）。
のインポートを変更します homeComponent に import { HomeComponent } from './home/home.component'; 名前付きエクスポートに切り替えたので。
コンポーネント登録を、上記とまったく同じディレクティブ登録に変更します。

AOTのngUpgradeの設定について詳しくは、この記事をご覧ください。

テンプレートの更新

コンポーネントが更新されたら、新しいAngular構文に準拠するように、必ずテンプレートを更新する必要があります。この場合、あなたがしなければならない最小限の変更だけがあります homeComponent. 削除する必要があります $ctrl 2行目。テンプレートは次のようになります。

<div class="row">
    <h1>{{title}}</h1>
</div>

これで、ハイブリッドアプリケーションに完全に機能するダウングレードされたホームコンポーネントができました。

AngularAppモジュールへの追加

新しいAngularコンポーネントをAngularモジュールに追加しましょう。開く app.module.ts. まず、インポートする必要があります HomeComponent 他のすべてのインポートの後：

public / src / app.module.ts

import { HomeComponent } from './home/home.component';

今、追加する必要があります HomeComponent Angularアプリケーションに。すべてのAngularコンポーネントをに追加する必要があります declarations NgModuleの配列。したがって、optionsオブジェクトの Line 12 の後に、declarationsという新しい配列を追加し、コンポーネントを追加します。

public / src / app.module.ts

declarations: [
    HomeComponent
]

また、作成する必要があります entryComponents 配列して追加します HomeComponent それに。ダウングレードされたすべてのコンポーネントをこれに追加する必要があります entryComponents 配列。後に追加します declarations:

public / src / app.module.ts

entryComponents: [
    HomeComponent
]

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

これで終了です。

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

以前と同じコマンドを実行して、アプリケーションがまだ機能していることを確認しましょう。これらのコマンドも次のとおりです。

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

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

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

に戻る localhost:9000. あなたは私たちの HomeComponent 書き直されたAngularコンポーネントとしてブラウザにロードされています！

Chrome DevToolsの[ソース]タブを見て、前向きになることもできます。開く webpack://、下にスクロールして ./src/home/home.component.ts、そして確かに、それはあります！

結論

このチュートリアルでは、AngularとngUpgradeをインストールし、Angularモジュールをセットアップし、AngularとAngularJSをブートストラップし、Webpackを更新し、最初のコンポーネントを書き直してダウングレードしました。

Angularの詳細については、Angularトピックページをご覧ください。

getdocs

13036

序章

前提条件

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

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

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

からブートストラップを削除する index.html

AngularJSモジュールの変更

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

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

作成 main.ts

Webpackの更新

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

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

AngularJSのコンポーネントのダウングレード

AOTコンパイルに関するクイックノート

テンプレートの更新

AngularAppモジュールへの追加

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

結論

getdocs

からブートストラップを削除する `index.html`

作成 `main.ts`