Angular CLI HMR懒加载路由全量热重载问题求助（Angular7已确认）

我完全懂你的困扰——Angular 7的HMR在处理懒加载模块热更新时确实存在这个恼人的问题，修改懒加载组件时会连带重载一大堆核心模块、全局服务甚至第三方依赖，导致页面刷新慢好几秒，开发体验大打折扣。结合我自己的踩坑经验，给你几个可行的解决方向：

1. 针对懒加载模块优化HMR的模块替换逻辑 #

默认的HMR配置对懒加载模块的处理不够精细，我们可以在main.ts里手动添加针对懒加载模块的热更新监听，避免触发全量重载。举个例子：

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode, NgModuleRef } from '@angular/core';
import { Router } from '@angular/router';
import { environment } from './environments/environment';
import { AppModule } from './app/app.module';
import { hmrBootstrap } from './hmr';

if (environment.production) {
  enableProdMode();
}

const bootstrap = () => platformBrowserDynamic().bootstrapModule(AppModule);

if (environment.hmr) {
  if (module['hot']) {
    hmrBootstrap(module, bootstrap);
    
    // 单独监听懒加载的HomeModule
    module['hot'].accept('./app/public/home/home.module', () => {
      // 引入更新后的模块
      const updatedHomeModule = require('./app/public/home/home.module').HomeModule;
      // 结合路由做局部模块替换，避免全量重启AppModule
      const router = module['hot'].data.moduleRef.injector.get(Router);
      router.resetConfig([
        // 保留原有路由配置，替换懒加载模块引用
        { path: '', loadChildren: () => updatedHomeModule },
        // 其他路由配置...
      ]);
    });
  } else {
    console.error('HMR未在webpack-dev-server中启用！');
  }
} else {
  bootstrap().catch(err => console.error(err));
}

这种方式可以让HMR只更新目标懒加载模块，而不会牵连核心模块和全局依赖。

2. 检查懒加载模块的依赖注入链路 #

很多时候全量重载是因为懒加载模块不小心依赖了根模块提供的全局单例服务（比如你日志里的AuthService、UserService）。当HMR更新懒加载模块时，会连带刷新这些全局服务所在的模块。

解决办法：

• 确保懒加载模块只注入自身专属的服务，避免直接引用根模块的全局服务
• 如果必须使用全局服务，尝试调整服务的providedIn配置，避免服务成为全局单例（需结合业务场景判断合理性）

3. 升级Angular版本（最彻底的方案） #

Angular 7的HMR确实存在不少懒加载相关的已知bug，官方在Angular 8及以后的版本中对HMR做了大幅优化，修复了懒加载模块全量重载的问题。如果项目允许的话，升级到Angular 8+是最彻底的解决办法。记得升级前做好代码备份，并且检查第三方依赖的兼容性。

4. 自定义Webpack配置优化HMR #

如果你已经 eject 了Angular CLI的配置（或者使用自定义Webpack配置），可以调整Webpack的HMR相关设置：

• 在webpack.dev.config.js中开启hotOnly，避免HMR失败时自动刷新页面
• 针对懒加载模块设置更精准的module.hot.accept范围，减少不必要的模块监听

示例配置片段：

module.exports = {
  devServer: {
    hot: true,
    hotOnly: true, // 只使用HMR，不自动刷新页面
    open: true
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NamedModulesPlugin() // 显示模块名称，方便调试HMR日志
  ]
};

调整后你可以观察控制台日志，正常情况下应该只输出懒加载模块相关的更新日志，不会再出现核心模块（比如core.js、router.js）的重载信息。

内容的提问来源于stack exchange，提问作者Augie Gardner