Detailed explanation of how to add hot update (HMR) function for Angular5/Angular6 projects

This article introduces a detailed explanation of how to add the hot update (HMR) function of the Angular5/Angular6 project. It is shared with you. The details are as follows:

A: What is HMR?

Q: HMR (hot replacement) is used to update code in a running application without rebuilding it. This will result in faster updates and fewer full page reloads.

angular6-hmr

Provides HMR (hot update) functions above angular6

step

1. Enter the parent directory of the angular project

git clone /staven630/angular6-hmr

angular6-hmr directory and angular project (for example: my-app) are in the same level relationship

2. Execute gulp hmr --dir angular directory name

like:

npm i
gulp hmr --dir my-app

3. Enter the angular project directory and install @angularclass/hmr

npm install --save-dev @angularclass/hmr --registry

4. In this way, the HMR of the angular project is configured and executed

npm run hmr

Note: Keep the project name (name in it) consistent with the project directory name

The following are the manual configuration steps

Angular6 Add HMR

environments directory

and add hmr: false

export const environment = {
 hmr: false
};

Copy environment adds and modify hmr:true

export const environment = {
 hmr: true
};

.document

Added in the configurations of build

"hmr": {
 "fileReplacements": [
  {
   "replace": "src/environments/",
   "with": "src/environments/"
  }
 ]
}

Added in the configurations of serve

"hmr": {
 "hmr": true,
 "browserTarget": "my-app:build:hmr"
}

Add compilerOptions in type

"types": ["node"]

Added in scripts

"hmr": "ng serve --configuration hmr --open"

Installation dependencies

npm install --save-dev @angularclass/hmr

Created in the src directory

import { NgModuleRef, ApplicationRef } from '@angular/core';
import { createNewHosts } from '@angularclass/hmr';

export const hmrBootstrap = (module: any, bootstrap: () => Promise<NgModuleRef<any>>) => {
 let ngModule: NgModuleRef<any>;
 ();
 bootstrap().then(mod => ngModule = mod);
 (() => {
  const appRef: ApplicationRef = (ApplicationRef);
  const elements = (c => );
  const makeVisible = createNewHosts(elements);
  ();
  makeVisible();
 });
};

Revise

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/';
import { environment } from './environments/environment';

import { hmrBootstrap } from './hmr';

if () {
 enableProdMode();
}

const bootstrap = () => platformBrowserDynamic().bootstrapModule(AppModule);

if () {
 if (module[ 'hot' ]) {
  hmrBootstrap(module, bootstrap);
 } else {
  ('HMR is not enabled for webpack-dev-server!');
  ('Are you using the --hmr flag for ng serve?');
 }
} else {
 bootstrap().catch(err => (err));
}

Angular5 Add HMR

environments directory

and add hmr: false

export const environment = {
 hmr: false
};

Copy environment adds and modify hmr:true

export const environment = {
 hmr: true
};

Add environments to .

"hmr": "environments/"

Add in scripts

"hmr": "ng serve --hmr -e=hmr --open"

Installation dependencies

npm install --save-dev @angularclass/hmr

Created in the src directory

import { NgModuleRef, ApplicationRef } from '@angular/core';
import { createNewHosts } from '@angularclass/hmr';

export const hmrBootstrap = (module: any, bootstrap: () => Promise<NgModuleRef<any>>) => {
 let ngModule: NgModuleRef<any>;
 ();
 bootstrap().then(mod => ngModule = mod);
 (() => {
  const appRef: ApplicationRef = (ApplicationRef);
  const elements = (c => );
  const makeVisible = createNewHosts(elements);
  ();
  makeVisible();
 });
};

Revise

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/';
import { environment } from './environments/environment';

import { hmrBootstrap } from './hmr';

if () {
 enableProdMode();
}

const bootstrap = () => platformBrowserDynamic().bootstrapModule(AppModule);

if () {
 if (module[ 'hot' ]) {
  hmrBootstrap(module, bootstrap);
 } else {
  ('HMR is not enabled for webpack-dev-server!');
  ('Are you using the --hmr flag for ng serve?');
 }
} else {
 bootstrap().catch(err => (err));
}

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.