Angular懒加载：Chrome与Firefox的表现差异排查

我之前也碰到过类似的Angular懒加载跨浏览器差异问题，这大概率不是Firefox的新特性导致的，更可能是加载机制、路由配置或缓存等细节出了问题，咱们来梳理几个常见的排查方向：

可能的原因及解决思路 #

• Firefox预加载机制的误触发
  Firefox有一项资源预加载/预解析特性，会自动预加载它预测即将需要的资源。如果你的Angular懒加载模块的路由或资源引用方式让浏览器误判了，可能会触发两次模块加载。你可以临时关闭这个特性测试：在Firefox地址栏输入about:config，找到network.preload.enabled并设置为false，重启浏览器后再验证是否还会出现双实例化的情况。

• 路由或服务配置的重复注册
  检查你的Angular路由配置，有没有不小心重复注册了同一个懒加载路由？或者有没有在根模块AppModule和懒加载模块中重复导入了同一个服务模块？另外，如果使用provideIn: 'root'声明的服务，又在某个模块的providers数组里重复添加了，这种重复注册在不同浏览器的加载时序下可能表现出差异，导致Firefox中触发双实例化。

• 第三方库或Polyfill的兼容性问题
  部分第三方库在Firefox中的动态脚本加载行为和Chrome等浏览器不同，尤其是涉及到懒加载逻辑的库。你可以检查项目中的zone.js版本是否适配当前Firefox版本，或者有没有其他polyfill脚本在Firefox中触发了额外的应用初始化流程。

• 浏览器缓存或DevTools的干扰
  Firefox的开发者工具缓存有时候会导致奇怪的加载异常。你可以尝试清空浏览器缓存，或者在DevTools的「网络」面板中勾选「禁用缓存」选项，然后重新加载页面，看看是否能解决问题。

额外的调试技巧 #

你可以在出现双实例化的服务构造函数中添加日志，追踪实例化时机：

constructor() {
  console.log('服务实例化：', new Date().getTime(), this);
}

同时结合Angular的路由事件监听，确认是否真的触发了两次懒加载模块加载：

constructor(private router: Router) {
  this.router.events.subscribe(event => {
    if (event instanceof RouteConfigLoadStart) {
      console.log('开始加载模块：', event.route.path);
    }
  });
}

浏览器表现对比 #

Chrome中的表现：

Firefox中的表现：

内容的提问来源于stack exchange，提问作者Leon Marzahn