今回は 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
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(); }); };
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(); }
JS は createElement() を使用して HTML を動的に追加します
vue-infinite-loading を使用して無限読み込み効果を作成します
以上がAngular は HMR コード解析を使用しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。