Méthode d'implémentation de la fonction HMR angulaire (avec code)

Cette fois, je vais vous expliquer comment implémenter la fonction Angular HMR (avec code). Quelles sont les précautions pour implémenter la fonction Angular HMR ? 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 de mettre en œuvre cela dans le projet créé par angulaire/cli. Les étapes sont les suivantes :

1. un fichier src/environments/environment .hmr.ts, le contenu est le suivant

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

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

Si hmr dans environnement.ts S'il est défini sur true, alors ng serve --hmr aura 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 Environment.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 :

Explication détaillée de l'utilisation de mint-ui dans vue

Barre de défilement de la page d'exploration JS

Résumé de l'algorithme de tri JS

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!