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