详解Angular5Angular6项⽬如何添加热更新（HMR）功能本⽂介绍了详解Angular5/Angular6项⽬如何添加热更新(HMR)功能，分享给⼤家，具体如下：
A：什么是HMR？
Q：HMR（热替换）⽤于在运⾏的应⽤程序中更新代码⽽不需要重建它。这将导致更快的更新和更少的全页重新加载。
提供angular6以上HMR(热更新)功能
步骤
1、进⼊angular项⽬⽗级⽬录内
git clone github/staven630/angular6-hmr
angular6-hmr⽬录与angular项⽬(例如：my-app)是同级关系
2、执⾏gulp hmr --dir angular⽬录名
如：
npm i
gulp hmr --dir my-app
3、进⼊angular项⽬⽬录，安装@angularclass/hmr
npm install --save-dev @angularclass/hmr --registry registry.
4、这样angular项⽬的HMR就配置完成了，执⾏
npm run hmr
注：保持项⽬名(package.json中的name)与项⽬⽬录名⼀致
以下为⼿动配置步骤
Angular6添加HMR
environments⽬录
environments.ts和environment.prod.ts增加hmr: false
export const environment = {
hmr: false
};
复制environment新增environment.hmr.ts修改hmr:true
export const environment = {
hmr: true
};
.angular.json⽂件
build的configurations中添加
"hmr": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.hmr.ts"
}
]
}
serve的configurations中添加
"hmr": {
"browserTarget": "my-app:build:hmr"
}
tsconfig.app.json的compilerOptions的types中添加
"types": ["node"]
package.json的scripts中添加
"hmr": "ng serve --configuration hmr --open"
安装依赖
npm install --save-dev @angularclass/hmr
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 = (ApplicationRef);
const elements = appRefponents.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 './dule';
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);
bootstrap项目} else {
<('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));
}
Angular5添加HMR
environments⽬录
environments.ts和environment.prod.ts增加hmr: false
export const environment = {
hmr: false
};
复制environment新增environment.hmr.ts修改hmr:true
export const environment = {
};
.angular-cli.json的environments中添加
"hmr": "environments/environment.hmr.ts"
在package.json的scripts中增加
"hmr": "ng serve --hmr -e=hmr --open"
安装依赖
npm install --save-dev @angularclass/hmr
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 = (ApplicationRef);
const elements = appRefponents.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 './dule';
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 {
<('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));
}
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。