Comment implémenter la fonction HMR d'Angular

Cette fois, je vais vous montrer comment implémenter la fonction HMR d'Angular. Quelles sont les précautions pour implémenter la fonction HMR d'Angular. Ce qui suit est un cas pratique, jetons un coup d'oeil.

Quand un collègue utilisait Angular récemment, il espérait avoir la fonction comme VUE, où le navigateur ne s'actualise pas après modification du code, et la page mise à jour correspondant aux composants modifiés . Le nom de cette fonction est HMR (hot module replace).

Après une petite recherche, j'ai trouvé qu'il n'est pas trop difficile d'implémenter cela dans le projet créé par angulaire/cli. Les étapes sont les suivantes :

1. Créez d'abord un src/. environnements/environment.hmr.ts, le contenu est le suivant

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

Bien sûr, les environnement.prod.ts et environnement.ts correspondants doivent ajouter un hmr:false.

Si hmr dans environnement.ts est défini sur true , alors ng serve --hmr a le même effet. Cependant, je ne suis pas si convaincu de la fonction de remplacement à chaud. L'actualisation du navigateur peut garantir que le statut est plus propre, j'ai donc défini hmr dans environnement.ts sur

2. Dans. .angular - Ajoutez l'environnement hmr à l'environnement du fichier cli.json, à peu près comme suit :

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

3. Ajoutez une nouvelle commande aux scripts de package.json. (Bien sûr, vous pouvez également exécuter ng serve --hmr -e=hmr directement sans l'ajouter, ce qui a le même effet que d'exécuter npm run hmr)

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

4. Installez le . 🎜>module hmr, la commande est la suivante :

npm install --save-dev @angularclass/hmr

5. Créez le fichier srchmr.ts avec le contenu suivant :

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

C'est la clé du remplacement à chaud, hmrBootstrap remplacera le bootstrap d'origine (comme vous le verrez ci-dessous), remplacera plus tard, lorsqu'un nouveau module sera mis à jour, HMR supprimera d'abord l'ancien module, puis recevra le nouveau module. Tout cela se produit dans le navigateur. La page ne sera donc pas actualisée.

6. Mettez à jour le fichier srcmain.ts comme suit :

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

Le remplacement ici nécessite le fichier de démarrage. S'il est défini sur hmr, appelez hmrBootStrap pour démarrer la page Web. sinon, utilisez le passé

7. Maintenant, exécutez npm run hmr ou ng serve --hmr -e=hmr pour réaliser la fonction de remplacement à chaud.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Introduction détaillée du composant de journal par défaut express morgan

Remplacement du module à chaud HMR/mise à jour à chaud de Webpack Le étapes spécifiques

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!