So implementieren Sie die Angular HMR-Funktion (Hot Module Replacement).

In diesem Artikel wird hauptsächlich die Implementierungsmethode der Angular HMR-Funktion (Hot Module Replacement) vorgestellt. Der Inhalt ist ziemlich gut und wird als Referenz dienen.

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 entsprechend den geänderten Komponenten aktualisiert wird. 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:

Erst erstellen eine src/environments/environment .hmr.ts-Datei, der Inhalt ist wie folgt

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

Natürlich die entsprechenden Environment.prod.ts und Environment.ts muss ein hmr:false hinzufügen. Wenn hmr in Environment.ts auf true gesetzt ist, hat ng dienen --hmr den gleichen Effekt. Ich bin jedoch nicht so überzeugt, dass die Hot-Replacement-Funktion einen saubereren Zustand gewährleisten kann, daher habe ich hmr in Environment.ts auf false gesetzt. 2. In .angular-cli. Fügen Sie die HMR-Umgebung zur Umgebung der JSON-Datei hinzu, ungefähr wie folgt:

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

"scripts": {
 ...
 "hmr": "ng serve --hmr -e=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();
 });
};

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 Serve --hmr -e=hmr aus Implementieren Sie die Hot-Replacement-Funktion.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

Über $apply und die optimierte Verwendung in Angularjs

VueJS-Komponenten interagieren über Requisiten und Verifizierungsmethode

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