详解Angular6 热加载配置方案
Angular6热加载配置方案，分享给大家，具体如下：
示例ng版本如下：
$ng--version __________ /\________||______/___|||__| /△\|'_\/_`|||||/_`|'__||||||| /___\||||(_|||_|||(_|||||___||___|| /_/\_\_||_|\__,|\__,_|_|\__,_|_|\____|_____|___| |___/ AngularCLI:6.0.8 Node:8.11.1 OS:win32x64 Angular:6.1.3 ...animations,common,compiler,compiler-cli,core,forms ...http,language-service,platform-browser ...platform-browser-dynamic,router PackageVersion ----------------------------------------------------------- @angular-devkit/architect0.6.8 @angular-devkit/build-angular0.6.8 @angular-devkit/build-optimizer0.6.8 @angular-devkit/core0.6.8 @angular-devkit/schematics0.6.8 @angular/cli6.0.8 @ngtools/webpack6.0.8 @schematics/angular0.6.8 @schematics/update0.6.8 rxjs6.2.2 typescript2.7.2 webpack4.8.3
安装hmr依赖包
npminstall--save-dev@angularclass/hmr--registryhttps://registry.npm.taobao.org
配置hmr文件
在src/environments目录下添加environment.hmr.ts配置文件
文件内容如下：
exportconstenvironment={
production:false,
hmr:true
};
然后分别在environment.prod.ts和environment.ts添加hmr:false配置项
配置src/tsconfig.app.json文件
"compilerOptions":{
...
"types":["node"]
}
如果不配置上面的"types":["node"],则会报错
ERRORinsrc/main.ts(16,7):errorTS2304:Cannotfindname'module'.
src/main.ts(17,18):errorTS2304:Cannotfindname'module'.
配置src/hmr.ts文件内容如下
import{NgModuleRef,ApplicationRef}from"@angular/core";
import{createNewHosts}from"@angularclass/hmr";
exportconsthmrBootstrap=(
module:any,
bootstrap:()=>Promise>
)=>{
letngModule:NgModuleRef;
module.hot.accept();
bootstrap().then(mod=>(ngModule=mod));
module.hot.dispose(()=>{
constappRef:ApplicationRef=ngModule.injector.get(ApplicationRef);
constelements=appRef.components.map(c=>c.location.nativeElement);
constmakeVisible=createNewHosts(elements);
ngModule.destroy();
makeVisible();
});
};
更新src/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();
}
constbootstrap=()=>platformBrowserDynamic().bootstrapModule(AppModule);
if(environment.hmr){
if(module["hot"]){
hmrBootstrap(module,bootstrap);
}else{
console.error("HMRisnotenabledforwebpack-dev-server!");
console.log("Areyouusingthe--hmrflagforngserve?");
}
}else{
bootstrap().catch(err=>console.log(err));
}
配置angular.json文件
...
"build":{
"builder":"@angular-devkit/build-angular:browser",
"options":{
"outputPath":"dist/ng6",
"index":"src/index.html",
"main":"src/main.ts",
"polyfills":"src/polyfills.ts",
"tsConfig":"src/tsconfig.app.json",
"assets":["src/favicon.ico","src/assets"],
"styles":["src/styles.css"],
"scripts":[]
},
"configurations":{
"hmr":{
"fileReplacements":[
{
"replace":"src/environments/environment.ts",
"with":"src/environments/environment.hmr.ts"
}
]
},
"production":{
"fileReplacements":[
{
"replace":"src/environments/environment.ts",
"with":"src/environments/environment.prod.ts"
}
],
"optimization":true,
"outputHashing":"all",
"sourceMap":false,
"extractCss":true,
"namedChunks":false,
"aot":true,
"extractLicenses":true,
"vendorChunk":false,
"buildOptimizer":true
}
}
},
...
"serve":{
"builder":"@angular-devkit/build-angular:dev-server",
"options":{
"browserTarget":"ng6:build"
},
"configurations":{
"production":{
"browserTarget":"ng6:build:production"
},
"hmr":{
"browserTarget":"ng6:build:hmr",
"hmr":true
}
}
},
启动应用
- 方式一：ngserve--configurationhmr
- 方式二：ngrunng6:serve:hmr
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。