Méthode d'implémentation de la fonction HMR angulaire (remplacement de module à chaud)

Cet article présente principalement la méthode d'implémentation de la fonction Angular HMR (hot module replacement). Maintenant, je le partage avec vous et le donne 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 avec la commande suivante :

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

5. Créez le fichier 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). , lorsqu'un nouveau module est mis à jour, hmr sera déplacé en premier. 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();
}

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles connexes :

Explication détaillée de l'objet AJAX XMLHttpRequest

Le framework Django utilise ajax pour implémenter la fonction d'importation de données par lots

Analyse d'exemple d'image de chargement asynchrone Ajax

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!