在Angular 7+中,如果涉及任何路由解析,HMR(热模块替换)将无法工作。这是因为HMR功能在路由解析时无法获取完整的应用程序状态。
要解决这个问题,可以使用ngx-hmr库来帮助实现HMR功能。下面是解决方法的代码示例:
npm install ngx-hmr --save
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HmrModule } from 'ngx-hmr';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
HmrModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { hmrBootstrap } from 'ngx-hmr';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
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));
}
通过以上步骤,你的应用程序将能够在涉及路由解析的情况下使用HMR功能。