Ionic 4中AppComponent重复加载问题排查求助

我一眼就看到问题出在你的路由配置里了！在app-routing.module.ts中，你把AppComponent又当成了路由组件来使用，而Angular已经通过bootstrap: [AppComponent]把它作为根组件加载了一次，这就直接导致了重复实例化的问题。

问题根源分析 #

你的index.html里的<app-root></app-root>会让Angular自动初始化并挂载AppComponent作为应用的根组件。但在app-routing.module.ts的路由配置中，你额外添加了这样一条规则：

{ path: '', component: AppComponent, children: [...] }

当路由匹配到空路径时，Angular会再次创建AppComponent的实例并挂载到路由出口（如果你的AppComponent模板里有<router-outlet>的话），这就造成了DOM中出现两个AppComponent实例，控制台的日志自然也会打印两次。

具体解决方案 #

你需要修改路由配置，移除把AppComponent作为路由组件的那条规则。正确的做法是：根路由直接重定向到目标页面，或者如果需要统一布局的话，创建一个专门的布局组件来承载子路由，绝对不能复用根组件AppComponent。

修改后的app-routing.module.ts代码如下：

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
import { ChatPageModule } from './pages/chat/chat.module';
import { ChampionsPageModule } from './pages/champions/champions.module';
import { ProfilePageModule } from './pages/profile/profile.module'

const routes: Routes = [
  { path: '', redirectTo: '/vocabulary/main', pathMatch: 'full' },
  // 移除原有的AppComponent路由，直接定义各子路由的入口
  { 
    path: 'vocabulary', 
    loadChildren: './pages/vocabulary/vocabulary-root/vocabulary-root.module#VocabularyPageModule' 
  },
  { 
    path: 'grammar', 
    loadChildren: './pages/grammar/grammar-root/grammar-root.module#GrammarPageModule' 
  },
  { 
    path: 'letters', 
    loadChildren: './pages/letters/letters-root/letters-root.module#LettersPageModule' 
  },
  { 
    path: 'contactUs', 
    loadChildren: './pages/contact-us/contact-us.module#ContactUsPageModule' 
  },
  { 
    path: 'settings', 
    loadChildren: './pages/settings/settings.module#SettingsPageModule' 
  },
  { 
    path: 'tips', 
    loadChildren: './pages/tips/tips.module#TipsPageModule' 
  },
  { 
    path: 'home', 
    loadChildren: './pages/home/home.module#HomePageModule' 
  },
  { 
    path: 'champions', 
    loadChildren: () => ChampionsPageModule 
  },
  { 
    path: 'word/:wordId', 
    loadChildren: './pages/word/word.module#WordPageModule' 
  },
  { 
    path: 'user/:partnerGuid', 
    loadChildren: './pages/user/user.module#UserPageModule' 
  },
  { 
    path: 'friends', 
    loadChildren: './pages/users/users.module#UsersPageModule' 
  },
  { 
    path: 'chat/:type', 
    loadChildren: () => ChatPageModule 
  },
  { 
    path: 'profile', 
    loadChildren: () => ProfilePageModule 
  },
];

@NgModule({
  imports: [ 
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules }) 
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {}

额外检查建议 #

1. 确认你的AppComponent模板里只有一个<router-outlet>（如果需要路由导航的话），不要在其他组件模板里重复添加。
2. 检查app.module.ts的declarations数组，确保AppComponent只被声明了一次（你的代码里这部分是正确的）。
3. 排查所有懒加载模块，确保没有意外导入或声明AppComponent。

这样修改后，AppComponent只会被Angular作为根组件初始化一次，重复加载的问题就会彻底解决。

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