Angular 热替换HMR 报错cannot find name module

热替换（Hot Module replacement）

1. 该功能能够实现修改后页面不刷新也能更新
2. 该功能使用websocket 实现，当后台的文件修改后，后台就会推送修改到前端，让前端替换修改的那一部分
3. 如果使用nginx 解决前后端跨域的问题，websocket 连接将会失效，会不停的在console中报错（建议使用自带的proxy代理，或者后端使用请求头解决跨域）

操作步骤

1. 在 src 目录下添加 hmr.ts 文件

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

2. 修改 main.ts

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

3. 修改 angular.json

// 在build 中添加
"build": {
  "configurations": {
    ...
    "hmr": {
      "fileReplacements": [
        {
          "replace": "src/environments/environment.ts",
          "with": "src/environments/environment.hmr.ts"
        }
      ]
    }
  }
},
// 在serve 中添加
...
"serve": {
  "configurations": {
    ...
    "hmr": {
      "hmr": true,
      "browserTarget": "<project-name>:build:hmr"
    }
  }
}

4. 添加 environment.hmr.ts 在environments 文件夹中

export const environment = {
  production: false,
  hmr: true
};
// 注意其他enviroment文件也应该加上 hmr: false

启动

1. ng serve --configuration hmr --hmr

报错

1. route Error

// bug
Lazy routes discovery is not enabled. 
Because there is neither an entryModule nor a statically analyable boostrap code in the main file.

// 解决方案
// 没有将原来的 platformBrowserDynamic().bootstrapModule(AppModule) 给删除

2. find module error

// bug
Cannot find name no module

• 在 tsconfig.app.ts 中添加 ``types`: [“node”], 或在tsconfig.json 中添加

{
	...
	"compilerOptions": {
		"types": ["node"]
	}
}

3. chunk error

// bug
Cannot use [chunkhash] or [contenthash] for chunk in '[name].[chunkhash:20].js' (use [hash] instead)

// 解决方案
在 angular.json中，build > configurations > hmr 中，
修改 outputhashing 为 none