Comment implémenter la fonction Angular HMR (remplacement de module à chaud)

Cet article présente principalement la méthode d'implémentation de la fonction Angular HMR (hot module replacement). Le contenu est assez bon, je vais le partager avec vous maintenant et le donner comme référence.

Lorsqu'un collègue utilisait Angular récemment, il espérait avoir une fonction comme VUE, où le navigateur ne s'actualise pas après avoir modifié le code, et la page se met automatiquement à jour en fonction des 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. a src/environments/environment Le contenu du fichier .hmr.ts est le suivant : false.

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

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

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

3. Ajoutez-en un nouveau aux scripts de package.json Ordre. (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)

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

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

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

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

npm install --save-dev @angularclass/hmr

C'est la clé du remplacement à chaud. hmrBootstrap remplacera le bootstrap d'origine (comme vous le verrez ci-dessous). Après le remplacement, lorsqu'un nouveau module est mis à jour, hmr sera d'abord déplacé. Débarrassez-vous des anciens modules et recevez de nouveaux modules. 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 { 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();
 });
};

Vous devez démarrer le fichier. si vous le remplacez ici. Définissez sur hmr, puis 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 mettre en œuvre la fonction de remplacement à chaud.

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

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

À propos de $apply et de l'utilisation optimisée dans Angularjs

Les composants VueJS interagissent via les accessoires et la méthode de vérification

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!