How to implement Angular HMR (hot module replacement) function

This article mainly introduces the implementation method of Angular HMR (hot module replacement) function. The content is quite good. I will share it with you now and give it as a reference.

When a colleague was using Angular recently, he hoped to have the function like VUE, where the browser does not refresh after modifying the code, and the page automatically updates corresponding to the modified components. The name of this function is HMR (hot module replace).

After a little research, I found that it is not too difficult to implement this in the project created by angular/cli. The steps are as follows:

1. First create a src/environments/environment .hmr.ts file, the content is as follows

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

Of course, the corresponding environment.prod.ts and environment.ts need to add an hmr:false.

If hmr in environment.ts is set to true, then ng serve --hmr will have the same effect. However, I am not so convinced about the hot replacement function. Refreshing the browser can ensure a cleaner state, so I set hmr in environment.ts to false.

2. In .angular-cli. Add the hmr environment to the environment of the json file, roughly as follows:

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

3. Add a new command to the scripts of package.json. (Of course, you can also run ng serve --hmr -e=hmr directly without adding it, which has the same effect as running npm run hmr)

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

4. Install the hmr module, the command is as follows:

npm install --save-dev @angularclass/hmr

5. Create the src\hmr.ts file with the following content:

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

This is the key to hot replacement. hmrBootstrap will replace the original bootstrap (as you will see below). After replacement, when a new module is updated, hmr will first remove the old one. module and then receive the new module. These all happen in the browser. So the page won't refresh.

6. Update the src\main.ts file as follows:

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

If you replace it here, you have to start the file. Set to hmr, then call hmrBootStrap to start the web page, otherwise use the past

7. Now run npm run hmr or ng serve --hmr -e=hmr to implement the hot replacement function.

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

About $apply and optimized use in Angularjs

VueJS components interact through props and Verification method

The above is the detailed content of How to implement Angular HMR (hot module replacement) function. For more information, please follow other related articles on the PHP Chinese website!