Angular は HMR コード解析を使用します

今回は Angular による HMR コード分析の使用についてお届けします。 Angular による 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に設定されている場合、ngserve --hmrは次のようになります。同じ効果です。ただし、ホットリプレース機能については、ブラウザを更新すると確実にきれいな状態になるので、environment.tsのhmrをfalseに設定しました

2. .angular-cli.jsonの環境にhmrを追加します。 file 環境はおおよそ次のとおりです:

"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();
 });
};

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

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

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
import { hmrBootstrap } from './hmr';
if (environment.production) {
 enableProdMode();
}
const bootstrap = () => platformBrowserDynamic().bootstrapModule(AppModule);
if (environment.hmr) {
 if (module[ 'hot' ]) {
  hmrBootstrap(module, bootstrap);
 } else {
  console.error('Ammm.. HMR is not enabled for webpack');
 }
} else {
 bootstrap();
}

hmr に設定されている場合は、hmrBootStrap を呼び出して Web ページを開始する必要があります。それ以外の場合は、過去のものを使用してください

この記事の事例を読んでその方法をマスターした方は、よりエキサイティングな内容については、php 中国語 Web サイトの他の関連記事にご注意ください。

推奨読書:

JS は createElement() を使用して HTML を動的に追加します

vue-infinite-loading を使用して無限読み込み効果を作成します

以上がAngular は HMR コード解析を使用しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。