Angular verwendet HMR-Code-Parsing

Dieses Mal werde ich Ihnen die Verwendung der HMR-Codeanalyse durch Angular vorstellen. Was sind die Vorsichtsmaßnahmen für die Verwendung der HMR-Codeanalyse durch Angular? Das Folgende ist ein praktischer Fall.

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/. Umgebungen/environment.hmr. ts Datei, der Inhalt ist wie folgt

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

Natürlich müssen die entsprechenden Environment.prod.ts und Environment.ts ein hmr:false hinzufügen.

Wenn Wenn hmr in der Datei „environment.ts“ auf „true“ gesetzt ist, hat ng servo --hmr ebenfalls den gleichen Effekt. Allerdings bin ich nicht so überzeugt von der Hot-Replacement-Funktion, die einen saubereren Zustand gewährleisten kann, daher habe ich hmr in Environment.ts auf false gesetzt. 2. In der Datei .angular-cli.json Die Umgebung zum Hinzufügen von hmr zur Umgebung sieht ungefähr wie folgt aus:

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

3. Fügen Sie einen neuen Befehl zu den Skripten in 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)

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

4. Installieren Sie das hmr-Modul wie folgt:

npm install --save-dev @angularclass/hmr

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

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

Dies ist der Schlüssel zum Hot-Replacement (wie Sie unten sehen werden). ). Wenn nach dem Austausch ein neues Modul aktualisiert wird, entfernt hmr zuerst das alte Modul und akzeptiert dann das neue Modul. Dies geschieht alles im Browser. Daher wird die Seite nicht aktualisiert.

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

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

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:

JS verwendet createElement(), um HTML dynamisch hinzuzufügen

vue-infinite-loading sorgt für unendliches Laden Wirkung

Das obige ist der detaillierte Inhalt vonAngular verwendet HMR-Code-Parsing. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!