Angular页面重载时constructor和ngOninit()被调用两次问题排查

必查路由相关核心问题点 #

• forRoot()重复调用是全组件生命周期触发两次的最高发原因：检查根模块是否重复调用RouterModule.forRoot()，forRoot()仅允许在根模块AppModule中调用1次，所有特性模块导入路由必须使用RouterModule.forChild()，多次调用forRoot()会生成重复路由实例，重载时触发两次导航流程，导致所有组件初始化两次
• 检查路由配置是否存在重复路径匹配：app-routing.module.ts的routes数组中如果存在两条完全相同的path规则，或者同一路径同时配置了component和loadChildren属性，会触发两次组件渲染
• 检查模板中<router-outlet>是否重复声明：如果根组件app.component.html和嵌套布局组件中同时声明了无对应子路由配置的<router-outlet>，会导致路由组件被重复插入到DOM中
• 检查根模块引导逻辑是否重复：打开main.ts确认仅执行了1次platformBrowserDynamic().bootstrapModule(AppModule)，重复引导根模块会让整个应用初始化两次
• 检查路由守卫逻辑是否存在同路径重定向：如果CanActivate/CanActivateChild等守卫在重载时触发了一次到当前路径的重定向，会触发两次完整的路由生命周期

临时规避API重复调用方案 #

可以先通过RxJS操作符规避接口重复请求的异常，再排查根因：

• 给HTTP请求添加take(1)/first()操作符，自动在第一次请求完成后取消订阅
• 用根级服务缓存请求结果，相同接口短时间内重复调用直接返回缓存值
• 组件销毁时在ngOnDestroy()中主动取消所有HTTP请求订阅，避免无效请求触发

内容的提问来源于stack exchange，提问作者Oil one the keyboard