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>
) => {
  let ngModule: NgModuleRef;
  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();
  });
};

  1. 修改 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));
}
  1. 修改 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": ":build:hmr"
    }
  }
}

  1. 添加 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) 给删除
  1. find module error
// bug
Cannot find name no module
  • 在 tsconfig.app.ts 中添加 ``types`: [“node”], 或在tsconfig.json 中添加
{
	...
	"compilerOptions": {
		"types": ["node"]
	}
}
  1. 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

你可能感兴趣的:(前端框架)