Quelles sont les modalités de mise en œuvre du remplacement de module à chaud ?

Cette fois je vais vous présenter quelles sont les méthodes de mise en œuvre du remplacement d'un module à chaud, quelles sont les précautions du remplacement d'un module à chaud, ce qui suit est un cas pratique, jetons un coup d'oeil.

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 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 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é

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 :

Instructions en étapes Angular5 pour ajouter des classes de style aux balises de composants

Comment utiliser websocket dans nodejs ( avec code)

Comment obtenir le plus grand élément dans un tableau de type Nombre

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!