Implementierungsmethode für Angular-HMR-Funktionen (mit Code)

Dieses Mal werde ich Ihnen die Methode zur Implementierung der Angular HMR-Funktion (mit Code) vorstellen. Was sind die Vorsichtsmaßnahmen für die Implementierung der Angular HMR-Funktion? Das Folgende ist ein praktischer Fall. Schauen wir uns das an.

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 Modul ersetzen).

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

Erst erstellen Bei einer src/environments/environment .hmr.ts-Datei lautet der Inhalt wie folgt

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

Natürlich müssen den entsprechenden Environment.prod.ts und Environment.ts ein hmr:false hinzugefügt werden.

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:

3. Fügen Sie einen neuen Befehl zu den Skripten von package.json hinzu. (Natürlich können Sie ng servo --hmr -e=hmr auch direkt ausführen, ohne es hinzuzufügen, was den gleichen Effekt hat wie das Ausführen von npm run hmr)

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

4.

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

Installieren Sie das

hmr-Modul, der Befehl lautet wie folgt:

5. Erstellen Sie die Datei srchmr.ts mit folgendem Inhalt:

npm install --save-dev @angularclass/hmr

Dies ist der Schlüssel zum Hot-Replacement. hmrBootstrap ersetzt den ursprünglichen Bootstrap (wie Sie unten sehen werden) und ersetzt später, wenn ein neues Modul aktualisiert wird, HMR zuerst das alte Modul und erhält dann das neue Modul. Dies geschieht alles im Browser. Daher wird die Seite nicht aktualisiert.

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:

Der Ersatz hier erfordert die Startdatei. Wenn sie auf hmr eingestellt ist, rufen Sie hmrBootStrap auf, um die Webseite zu starten. Andernfalls verwenden Sie die Vergangenheit

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, 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:

Detaillierte Erklärung der Verwendung von Mint-UI in Vue

JS-Crawling-Seiten-Bildlaufleiste

Zusammenfassung des JS-Sortieralgorithmus

Das obige ist der detaillierte Inhalt vonImplementierungsmethode für Angular-HMR-Funktionen (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!