Angular utilise l'analyse du code HMR

Cette fois, je vais vous présenter l'utilisation par Angular de l'analyse de code HMR. Quelles sont les précautions à prendre pour l'utilisation par Angular de l'analyse de code HMR ?

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 un état plus propre, j'ai donc défini hmr dans Environment.ts sur false

2. Dans le fichier .angular-cli.json. L'environnement pour ajouter hmr à l'environnement est à peu près le suivant :

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

3. Ajoutez une nouvelle commande aux scripts dans 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, le 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 de hmrBootstrap qui remplacera le bootstrap d'origine. (comme vous le verrez ci-dessous). Après remplacement, lorsqu'il y en a un nouveau. Lorsque le module est 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é

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 :

JS utilise createElement() pour ajouter dynamiquement du HTML

vue-infinite-loading permet un chargement infini Effet

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!