Angular初始加载根路径时根模板、导航栏重复加载两次如何解决

导航栏重复渲染是路由配置逻辑冲突导致的：

1. 你在AppModule的bootstrap启动数组中声明了RootComponent，Angular启动时会首先初始化这个组件，渲染出第一份导航栏，组件内的<router-outlet>作为全局路由出口等待加载路由匹配的组件。
2. 路由表中你又给空路径path: ''绑定了RootComponent作为路由渲染组件，访问根路径时，路由会在第一层RootComponent的路由出口中，再初始化一个新的RootComponent实例，连带渲染出第二份导航栏。
3. 访问/dashboard路径时渲染正常，是因为你给空路径路由加了pathMatch: 'full'配置，/dashboard无法完全匹配空路径，不会触发二次加载RootComponent的逻辑。另外补充：带children配置的父路由不应该设置pathMatch: 'full'，该配置会导致子路由永远无法被命中。

直接调整路由表配置即可，不需要改动组件模板代码，修改后的路由数组如下：

const routes: Routes = [
  {
    path: '',
    component: FeatureHomepageComponent,
    pathMatch: 'full'
  },
  {
    path: 'dashboard',
    component: FeatureDashboardComponent
  },
  {
    path: '**',
    redirectTo: ''
  }
];

调整逻辑说明：

• 移除路由表中空路径对RootComponent的绑定，RootComponent仅作为启动层的全局壳组件存在，内部导航栏只会初始化一次
• 首页、仪表盘组件直接作为根级路由配置，由RootComponent内的<router-outlet>负责渲染
• 保留空路径的pathMatch: 'full'配置，避免通配路由、其他前缀路由匹配异常

改完后启动应用，根路径访问时导航栏仅会渲染一次，所有页面路由加载逻辑恢复正常。

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