Angular项目刷新页面时所有页面ngOnInit调用两次问题求助

可能的原因及修复方案 #

• 检查路由调试配置
  如果路由配置中开启了enableTracing: true，部分场景下会触发额外路由事件，导致组件重复初始化。直接注释或删除该配置即可：

  RouterModule.forRoot(routes, {
    // enableTracing: true, 移除或注释此行
    useHash: false
  })
  

• 排查Zone.js重复加载
  若index.html手动引入了<script src="zone.js"></script>，同时angular.json的scripts数组又配置了一次，会导致变更检测异常，触发两次生命周期。检查两处配置，保留一处即可。

• 校验APP_INITIALIZER异步逻辑
  使用APP_INITIALIZER做全局初始化时，若异步函数重复触发或未正确完成，会引发路由重复初始化。确保初始化函数返回的Promise/Observable仅完成一次，比如：

  {
    provide: APP_INITIALIZER,
    useFactory: (configService: ConfigService) => () => configService.loadConfig(),
    deps: [ConfigService],
    multi: true
  }
  

  确认loadConfig()内部没有重复调用resolve或next的逻辑。

• 检查路由守卫的重复触发
  CanActivate等路由守卫中，若异步操作未正确处理（比如未取消订阅Observable），可能导致路由被多次触发。确保守卫逻辑仅返回一次结果，避免重复触发路由跳转。

• 排除浏览器或扩展干扰
  部分浏览器扩展、预加载机制可能导致页面双重加载。尝试用隐私模式打开页面，排查扩展影响；同时检查index.html中的<link rel="preload">配置，避免触发额外加载。

• 升级Angular到稳定版本
  早期Angular 12/13等版本存在路由初始化的已知bug，升级到最新稳定版可解决此类问题。

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