Angular uses HMR code parsing

This time I will bring you Angular's use of HMR code analysis. What are the precautions for Angular's use of HMR code analysis? The following is a practical case, let's take a look.

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 also has 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 the .angular-cli.json file The environment for adding hmr to the environment is roughly as follows:

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

3. Add a new command to the scripts in 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 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();
}

The replacement here requires the startup file. If it is set to hmr, then call hmrBootStrap to start the web page, otherwise use the past

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

JS uses createElement() to dynamically add HTML

vue-infinite-loading to make infinite loading Effect

The above is the detailed content of Angular uses HMR code parsing. For more information, please follow other related articles on the PHP Chinese website!