详解Angular5/Angular6项目如何添加热更新(HMR)功能

git clone https://github./staven630/angular6-hmr

npm i
gulp hmr --dir my-app

npm install --save-dev @angularclass/hmr --registry https://registry.npm.taobao.

npm run hmr

export const environment = {
 hmr: false
};

export const environment = {
 hmr: true
};

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

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

"types": ["node"]

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

npm install --save-dev @angularclass/hmr

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.aept();
 bootstrap().then(mod => ngModule = mod);
 module.hot.dispose(() => {
  const appRef: ApplicationRef = ngModule.injector.get(ApplicationRef);
  const elements = appRef.ponents.map(c => c.location.nativeElement);
  const makeVisible = createNewHosts(elements);
  ngModule.destroy();
  makeVisible();
 });
};

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('HMR is not enabled for webpack-dev-server!');
  console.log('Are you using the --hmr flag for ng serve?');
 }
} else {
 bootstrap().catch(err => console.log(err));
}

export const environment = {
 hmr: false
};

export const environment = {
 hmr: true
};

"hmr": "environments/environment.hmr.ts"

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

npm install --save-dev @angularclass/hmr

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.aept();
 bootstrap().then(mod => ngModule = mod);
 module.hot.dispose(() => {
  const appRef: ApplicationRef = ngModule.injector.get(ApplicationRef);
  const elements = appRef.ponents.map(c => c.location.nativeElement);
  const makeVisible = createNewHosts(elements);
  ngModule.destroy();
  makeVisible();
 });
};

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('HMR is not enabled for webpack-dev-server!');
  console.log('Are you using the --hmr flag for ng serve?');
 }
} else {
 bootstrap().catch(err => console.log(err));
}