angular nrwl/nx项目 hmr 开发热更新设置

如题：angular nrwl/nx项目 hmr 热更新设置

nx介绍：https://nx.dev/getting-started/what-is-nx

设置：

1、angular.json设置：

// 对应 app 的build与serve下的configurations加 hmr, 同时设置environments目录相应ts
"build": {
"configurations": {
"hmr": {"fileReplacements": [{"replace": "apps/system-admin/src/environments/environment.ts","with": "apps/system-admin/src/environments/environment.hmr.ts"}]
}
},
}
"serve": {
"configurations": {"production": {"browserTarget": "midback-admin:build:production"},"hmr": {"hmr": true,"browserTarget": "midback-admin:build:hmr"}
}
}

app相应设置，先上个目录结构，以下标红箭头是需要配置的文件：

// environment 目录3个文件

//environment.hmr.ts
export const environment = {production: false,hmr: true,
};//environment.prod.ts
export const environment = {production: true,hmr: false,
};//environment.ts
export const environment = {production: false,hmr: false,
};

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

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

启动程序：yarn ng serve --configuration hmr --project my-app

如果报错：main.ts error TS2304: Cannot find name 'module'. 那就在 tsconfig.app.json 加配置："types": ["node"]

{"extends": "../../tsconfig.json","compilerOptions": {"outDir": "../../dist/out-tsc/apps/vendor-admin","types": ["node"]},"exclude": ["test.ts","**/*.spec.ts"],"include": ["**/*.ts", "../../libs/vendor-admin/views/vendor-admin/src/index.ts"
]
}

重新启动app，这时应该就没有问题了，试一下修改代码，保存，页面就不会刷新了，一下子人都精神了！！！

如有遗漏，后面补充！

angular nrwl/nx项目 hmr 开发热更新设置相关推荐

angular 命令行项目_Angular命令行界面介绍
angular 命令行项目 Angular is closely associated with its command-line interface (CLI). The CLI streamlin ...
如何一键部署项目代码自动更新
my-deploy : 由nodejs写的一个自动更新工具,理论支持所有语言(php.java.c#)的项目,支持所有git仓库(bitbucket.github等). Github 效果如何? 如果 ...
Android UI（四）云通讯录项目之云端更新进度条实现
作者:泥沙砖瓦浆木匠网站:http://blog.csdn.net/jeffli1993 个人签名:打算起手不凡写出鸿篇巨作的人,往往坚持不了完成第一章节. 交流QQ群:[编程之美 36523458 ...
沉睡者 - 网赚创业VIP项目课程-持续更新中...
沉睡者 - 网赚创业VIP项目课程-持续更新中... 不管在线下还是线上,都尽量只做有积累可持续的项目,否则就容易进入到一个找项目做项目死项目之后,不断重复找项目,不断重复做苦力没有发展的死循环. 在 ...
Godot实现项目差异热更新
GodotHotUpdate 简介 Godot差异热更新项目利用PCK文件实现项目差异热更新示例 GitHub:https://github.com/gkertop/GodotHotUpdate 项 ...
IDEA中WEB项目结构和Artifacts设置
公司的WEB项目结构一直比较随意,没有统一的规范,新增项目也是直接用旧的项目文件夹拷贝过去修改,时间长了以后项目文件结构混乱,研究了半天终于找到了(可能)正确的目录结构设置,能够直接输出正确结构的Ar ...
Android开源项目集合(不断更新)
Android开源项目集合(不断更新) 女神节快乐~~~ 休息片刻23 PlayAndroid advanced-java FFmpegAndroidCameraEncoder ScaleRuler ...
WIN10系统禁止自动更新设置（二）
之前写过一篇,方法有两种,如下: WIN10系统禁止自动更新设置_紫龙大侠的博客-CSDN博客当年有以上的两种方法就够用了,2022年了,现在觉得不够用了,又加了几种.我现在用的教育版,教育版的wi ...
P3项目全球模板狗血设置之二 --- 移动类型523收货不能自动创建批次号
P3项目全球模板狗血设置之二 --- 移动类型523收货不能自动创建批次号在P3项目中,因项目实施范围限制等诸多原因,对于工厂的自制品,在SAP系统上使用MIGO + 523 移动类型组合来完成收货 ...

angular nrwl/nx项目 hmr 开发热更新设置

angular nrwl/nx项目 hmr 开发热更新设置相关推荐

最新文章

热门文章