Angular

2021-11-30 11:34:07 阅读：216 来源： 互联网

标签：const ts hmr angular environment ngModule Angular

1.安装hmr依赖

npm i --save-dev  @angularclass/hmr

2.src/environments/environment.hmr.ts - 添加environment.hmr.ts配置文件

export const environment = {
  production: false,
  hmr: true
}

3.在 environment.prod.ts 和 environment.ts 两个文件中添加 hmr:false

4.src/hmr.ts - 添加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();
  });
};

5.配置angular.json文件

configurations 对象：

增加

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

serve对象：

增加(hmr-angular - 项目名称)

"builder": "@angular-devkit/build-angular:dev-server",
"options": {
  "browserTarget": "hmr-angular:build"
},
"configurations": {
  "production": {
    "browserTarget": "hmr-angular:build:production"
  },
  "hmr": {
    "browserTarget": "hmr-angular:build:hmr",
    "hmr": true
  }
}

6.package.json - 新增启动命令

"hmr": "ng serve -c=hmr --disable-host-check"

运行 npm run hmr

标签：const,ts,hmr,angular,environment,ngModule,Angular
来源： https://blog.csdn.net/Ariel_tilamisu/article/details/121627988

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9