Heim > Web-Frontend > js-Tutorial > Hauptteil

Methode zur Implementierung der Angular-HMR-Funktion (Hot Module Replacement).

亚连
Freigeben: 2018-05-26 15:23:00
Original
1599 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich die Implementierungsmethode der Angular HMR-Funktion (Hot Module Replacement) vorgestellt. Jetzt teile ich sie mit Ihnen und gebe sie als Referenz.

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
};
Nach dem Login kopieren

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. Allerdings bin ich nicht so überzeugt von der Hot-Replacement-Funktion, die einen saubereren Zustand gewährleisten kann, daher habe ich hmr in ambient.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",
}
Nach dem Login kopieren


3. Fügen Sie einen neuen Befehl zu den Skripten des Pakets hinzu. json. (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"
}
Nach dem Login kopieren


4. Installieren Sie das HMR-Modul. Der Befehl lautet wie folgt:

npm install --save-dev @angularclass/hmr
Nach dem Login kopieren


5. Erstellen Sie die Datei srchmr.ts mit Folgender 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();
 });
};
Nach dem Login kopieren

Dies ist der Schlüssel zum Hot-Replacement (wie Sie unten sehen werden). Wenn das Modul aktualisiert wird, entfernt hmr zuerst das alte Modul und empfängt 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 &#39;@angular/core&#39;;
import { platformBrowserDynamic } from &#39;@angular/platform-browser-dynamic&#39;;

import { AppModule } from &#39;./app/app.module&#39;;
import { environment } from &#39;./environments/environment&#39;;

import { hmrBootstrap } from &#39;./hmr&#39;;

if (environment.production) {
 enableProdMode();
}

const bootstrap = () => platformBrowserDynamic().bootstrapModule(AppModule);

if (environment.hmr) {
 if (module[ &#39;hot&#39; ]) {
  hmrBootstrap(module, bootstrap);
 } else {
  console.error(&#39;Ammm.. HMR is not enabled for webpack&#39;);
 }
} else {
 bootstrap();
}
Nach dem Login kopieren


Sie müssen die Datei beim Ersetzen starten it hier. Wenn es auf hmr eingestellt ist, rufen Sie hmrBootStrap auf, um die Webseite zu starten, andernfalls verwenden Sie die Vergangenheit

7. Führen Sie nun npm run hmr oder ng Serve --hmr -e=hmr aus Implementieren Sie die Hot-Replacement-Funktion.


Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Detaillierte Erläuterung des AJAX XMLHttpRequest-Objekts

Django-Framework verwendet Ajax, um die Batch-Importdatenfunktion zu implementieren

Beispielanalyse für asynchrones Laden von Ajax-Bildern


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

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!