为什么我的Angular项目中app组件的ngOnInit方法会被调用两次？

云原生阿岚

2026-10-1

AppComponent ngOnInit 重复执行排查方案

核心原因确认

AppComponent 的ngOnInit执行两次，说明组件被实例化了两次，而非生命周期钩子本身的逻辑问题，可先在组件constructor中添加打印日志验证，若也触发两次即可确认。

优先级从高到低的排查点

检查index.html，确认根组件标签<app-root></app-root>只声明了一次，重复声明会触发多次实例化
检查根模块app.module.ts的bootstrap数组，确认仅声明了一次AppComponent，不要在路由的根路径配置中再次将AppComponent绑定为路由组件

检查根路由配置，避免出现如下错误配置：

// 错误示例：根路由重复绑定AppComponent，会导致AppComponent套嵌在自身的router-outlet中实例化两次
const routes: Routes = [
  { path: '', component: AppComponent },
  // 其余路由
]

正确方案是将首页逻辑抽离为独立的HomeComponent绑定到根路径，AppComponent仅作为全局布局容器使用

若项目接入了Angular Universal服务端渲染，属于正常现象：服务端预渲染时会执行一次，客户端水合时会再执行一次，可通过平台判断避免重复执行业务逻辑：

import { PLATFORM_ID, Inject } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';

constructor(@Inject(PLATFORM_ID) private platformId: Object) {}

ngOnInit(): void {
  // 仅在客户端环境执行业务逻辑
  if (isPlatformBrowser(this.platformId)) {
    this.translationService.init('customer-en');
    console.log('appInit')
    if (navigator.userAgent.includes("Window")) {
      this.window = true;
    }
  }
}