详解Angular6热加载配置方案

　　

Angular6热加载配置方案,分享给大家,具体如下:

　　

<强>示例ng版本如下:

　　 　　 　　ng——美元版本 　　 　　_ _ _ ___/\ _ _ _ _ _ _ | | _ _ _ _/___ | | | _ _ |/鱘 | ' _/_ \ ' | | | | |/_ ' | ' __ | | | | | | |/___ \ | | | | (_ | | | _ | | | (_ | | | | | ___ | | ___ | |/_ \ _ \ _ | | _ | \ _ | \ _,_ | _ | \ _,_ | _ | \告诉| | | 　　| ___/角CLI: 6.0.8 　　节点:8.11.1 　　操作系统:win32 x64 　　角:6.1.3 　　…动画,常见的,编译器、compiler-cli核心,形式 　　…http、语言服务platform-browser 　　…platform-browser-dynamic,路由器 　　 　　包版本 　　----------------------------------------------------------- 　　@angular-devkit/建筑师0.6.8 　　@angular-devkit/build-angular 0.6.8 　　@angular-devkit/build-optimizer 0.6.8 　　@angular-devkit/核心0.6.8 　　@angular-devkit/图表0.6.8 　　@angular/cli 6.0.8 　　@ngtools/webpack 6.0.8 　　@schematics/角0.6.8 　　@schematics/更新0.6.8 　　rxjs 6.2.2 　　打印稿2.7.2 　　webpack 4.8.3 　　 　　之前 　　 　　

<>强安装hmr依赖包
　　

　　 　　 　　npm安装——save-dev @angularclass/hmr——注册https://registry.npm.taobao.org 　　 　　

<>强配置hmr文件
　　

　　

在src/环境目录下添加environment.hmr。ts配置文件
　　

　　

文件内容如下:

　　 　　 　　出口const环境={ 　　生产:假的, 　　hmr:真 　　}; 　　之前 　　 　　

然后分别在environment.prod。ts和环境。ts添加hmr:假配置项

　　

配置src/tsconfig.app。json文件
　　

　　 　　 　　" compilerOptions ": { 　　… 　　“类型”(“节点”): 　　} 　　之前 　　 　　

如果不配置上面的“类型”:“节点”,则会报错

　　
　　在src/

错误main.ts(16、7):错误TS2304:找不到名字“模块”。
　　src/main.ts(17、18):错误TS2304:找不到名字“模块”。
　　

　　 　　

配置src/hmr。ts文件内容如下
　　

　　 　　 　　从“@angular进口{NgModuleRef, ApplicationRef}/核心”; 　　从“@angularclass/hmr”进口{createNewHosts}; 　　 　　出口const hmrBootstrap=( 　　模块:任何, 　　引导:()=比;Promise比; 　　)=比;{ 　　让ngModule: NgModuleRef; 　　module.hot.accept (); 　　引导()。然后(mod=比;(ngModule=mod)); 　　module.hot.dispose(()=比;{ 　　const appRef: ApplicationRef=ngModule.injector.get (ApplicationRef); 　　常量元素=appRef.components.map (c=比;c.location.nativeElement); 　　const makeVisible=createNewHosts(元素); 　　ngModule.destroy (); 　　makeVisible (); 　　}）; 　　}; 　　 　　之前 　　 　　

更新src/主要。ts文件内容如下
　　

　　 　　 　　从“@angular进口{enableProdMode}/核心”; 　　从“@angular/platform-browser-dynamic”进口{platformBrowserDynamic}; 　　 　　从“进口{AppModule}。/app/app.module”; 　　从“进口{环境}。/环境/环境”; 　　 　　从“进口{hmrBootstrap}。/hmr”; 　　 　　如果(environment.production) { 　　enableProdMode (); 　　} 　　 　　const引导=()=比;platformBrowserDynamic () .bootstrapModule (AppModule); 　　 　　如果(environment.hmr) { 　　如果(模块(“热”)){ 　　hmrBootstrap(模块,引导); 　　其他}{ 　　控制台。错误(“没有启用HMR webpack-dev-server !”); 　　控制台。日志(“你使用——hmr国旗为ng服务# 63;”); 　　} 　　其他}{ 　　引导()。抓住(呃=比;console.log (err)); 　　} 　　 　　

配置角。json文件
　　

　　 　　 　　… 　　“构建”:{ 　　“建设者”:“@angular-devkit/build-angular:浏览器”, 　　"选项":{ 　　:“outputPath dist/ng6”, 　　“指数”:“src/index . html”, 　　“主要”:“src/main.ts”, 　　:“polyfills src/polyfills.ts”, 　　:“tsConfig src/tsconfig.app.json”, 　　“资产”:“src/图标。图标”、“src/资产”), 　　“风格”:“src/styles”css, 　　“脚本”:[] 　　}， 　　"配置":{ 　　" hmr ": { 　　“fileReplacements”:( 　　{ 　　“替换”:“src/环境/environment.ts”, 　　“与”:“src/环境/environment.hmr.ts” 　　} 　　] 　　}， 　　"生产":{ 　　“fileReplacements”:( 　　{ 　　“替换”:“src/环境/environment.ts”, 　　“与”:“src/环境/environment.prod.ts” 　　} 　　]， 　　“优化”:没错, 　　“outputHashing”:“所有”, 　　“sourceMap”:假的, 　　“extractCss”:没错, 　　“namedChunks”:假的, 　　“aot”:没错, 　　“extractLicenses”:没错, 　　“vendorChunk”:假的, 　　“buildOptimizer”:真的 　　} 　　} 　　}， 　　… 　　"服务":{ 　　“建设者”:“@angular-devkit/build-angular: dev-server”, 　　"选项":{ 　　:“browserTarget ng6:构建” 　　}， 　　"配置":{ 　　"生产":{ 　　:“browserTarget ng6:构建:生产” 　　}， 　　" hmr ": { 　　“browserTarget”:“ng6:构建:hmr”, 　　“hmr”:真的 　　} 　　} 　　},

详解Angular6热加载配置方案