Angular HMR(ホットモジュールリプレイスメント)機能の実装方法

不言
リリース: 2018-07-02 14:33:54
オリジナル
1352 人が閲覧しました

この記事は主に Angular HMR (ホットモジュールリプレース) 機能の実装方法を紹介します。内容が非常に優れているので、参考として共有します。

最近同僚が Angular を使用していたとき、コードを変更してもブラウザが更新されず、変更されたコンポーネントに応じてページが自動的に更新される VUE のような機能が欲しいと考えていました。この機能の名前はHMR(ホットモジュールリプレース)です。

少し調べた結果、angular/cli で作成したプロジェクトにこれを実装するのはそれほど難しくないことがわかりました。手順は次のとおりです。

1. まず src/environments/environment.hmr.ts を作成します。次の内容のファイル

export const environment = {
 production: false,
 hmr: true
};
ログイン後にコピー

もちろん、対応するenvironment.prod.tsとenvironment.tsにはhmr: falseを追加する必要があります。

environment.tsのhmrがtrueに設定されている場合、ngです。 serve --hmr も同じ効果があります。ただし、ホットリプレースメント機能については、ブラウザを更新すると確実にきれいな状態になるので、environment.tsのhmrをfalseに設定します

2. .angular-cliの環境に追加します。 json ファイルを作成します。hmr の環境はおおよそ次のとおりです。

"environments": {
 ...
 "hmr": "environments/environment.hmr.ts",
}
ログイン後にコピー

3. package.json のスクリプトに新しいコマンドを追加します。 (もちろん、追加せずに ngserve --hmr -e=hmr を直接実行することもできます。これは、npm run hmr を実行するのと同じ効果があります)

"scripts": {
 ...
 "hmr": "ng serve --hmr -e=hmr"
}
ログイン後にコピー

4. hmr モジュール、コマンドをインストールします。は次のとおりです:

npm install --save-dev @angularclass/hmr
ログイン後にコピー

5. 次の内容で srchmr.ts ファイルを作成します:

import { NgModuleRef, ApplicationRef } from '@angular/core';
import { createNewHosts } from '@angularclass/hmr';

export const hmrBootstrap = (module: any, bootstrap: () => Promise<NgModuleRef<any>>) => {
 let ngModule: NgModuleRef<any>;
 module.hot.accept();
 bootstrap().then(currentModule => ngModule = currentModule);
 module.hot.dispose(() => {
  const appRef: ApplicationRef = ngModule.injector.get(ApplicationRef);
  const elements = appRef.components.map(c => c.location.nativeElement);
  const removeOldHosts = createNewHosts(elements);
  ngModule.destroy();
  removeOldHosts();
 });
};
ログイン後にコピー

これは、元のブートストラップを置き換える鍵となります。下記を参照)。交換後、新しいモジュールが更新されると、HMR は最初に古いモジュールを削除してから、新しいモジュールを受け取ります。これらはすべてブラウザ内で行われます。したがって、ページは更新されません。

6. srcmain.ts ファイルを次のように更新します。

import { enableProdMode } from &#39;@angular/core&#39;;
import { platformBrowserDynamic } from &#39;@angular/platform-browser-dynamic&#39;;

import { AppModule } from &#39;./app/app.module&#39;;
import { environment } from &#39;./environments/environment&#39;;

import { hmrBootstrap } from &#39;./hmr&#39;;

if (environment.production) {
 enableProdMode();
}

const bootstrap = () => platformBrowserDynamic().bootstrapModule(AppModule);

if (environment.hmr) {
 if (module[ &#39;hot&#39; ]) {
  hmrBootstrap(module, bootstrap);
 } else {
  console.error(&#39;Ammm.. HMR is not enabled for webpack&#39;);
 }
} else {
 bootstrap();
}
ログイン後にコピー

ここで置き換えるには、hmr に設定されている場合は hmrBootStrap を呼び出して Web ページを開始する必要があります。過去の

7 を使用して、npm run hmr または ngserve --hmr -e=hmr を実行して、ホット リプレース機能を実装します。

上記がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

関連する推奨事項:

Angularjs での $apply と最適化された使用について

VueJS コンポーネントは props を通じて対話および検証します

以上がAngular HMR(ホットモジュールリプレイスメント)機能の実装方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート