So implementieren Sie die HMR-Funktion von Angular

Dieses Mal zeige ich Ihnen, wie Sie die HMR-Funktion von Angular implementieren. Was sind die Vorsichtsmaßnahmen für die Implementierung der HMR-Funktion von Angular?

Als ein Kollege kürzlich Angular verwendete, hoffte er, eine Funktion wie VUE zu haben, bei der der Browser nach der Änderung des Codes nicht aktualisiert wird und die Seite automatisch aktualisiert entsprechend den geänderten Komponenten . Der Name dieser Funktion ist HMR (Hot Module Replacement).

Nach ein wenig Recherche habe ich festgestellt, dass es nicht allzu schwierig ist, dies in dem von angle/cli erstellten Projekt zu implementieren. Die Schritte sind wie folgt:

Erstellen Sie zuerst eine src/. Die Datei „environments/environment.hmr. ts“ lautet wie folgt:

export const environment = {
 production: false,
 hmr: true
};

Natürlich müssen die entsprechenden Umgebungen „environment.prod.ts“ und „environment.ts“ ein hmr:false hinzufügen.

Wenn hmr in Environment.ts auf true gesetzt ist, dann hat ng dienen --hmr den gleichen Effekt. Allerdings bin ich nicht so überzeugt von der Hot-Replacement-Funktion, die sicherstellen kann, dass der Status sauberer ist, daher habe ich hmr in Environment.ts auf „false“ gesetzt .angular – Fügen Sie die HMR-Umgebung zur Umgebung der Datei cli.json hinzu, ungefähr wie folgt:

"environments": {
 ...
 "hmr": "environments/environment.hmr.ts",
}

"scripts": {
 ...
 "hmr": "ng serve --hmr -e=hmr"
}

hmr-Modul, der Befehl lautet wie folgt:

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

6. Aktualisieren Sie die Datei srcmain.ts wie folgt:

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

7. Führen Sie nun npm run hmr oder ng servo --hmr -e=hmr aus, um die Hot-Replacement-Funktion zu realisieren.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website.

Empfohlene Lektüre:

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die HMR-Funktion von Angular. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!