Angular路由：嵌套路由下404跳转及根路径重定向问题

问题解决方案 #

一、根路径重定向失效的解决方法

根路径重定向失效的核心原因是路由模块导入顺序错误：Angular会按照模块导入顺序匹配路由，先导入的功能模块（如DashboardModule）中包含path: ''的路由配置，会优先匹配根路径，导致AppRoutingModule中的重定向规则无法生效。

修复步骤：
在app.module.ts的imports数组中，将AppRoutingModule移到所有功能模块的最前面，确保全局路由优先匹配：

@NgModule({
  declarations: [
    AppComponent,
    LoaderComponent,
  ],
  imports: [
    AppRoutingModule, // 移至所有功能模块之前
    NotFoundModule,
    DashboardModule,
    SubscriptionModule,
    DataroomModule,
    TaxDocumentsRefreshModule,
    HttpClientModule,
    OnboardingModule,
  ],
  // 其他配置不变
})
export class AppModule { }

二、嵌套路由下404页面跳转的正确方式

1. 全局404路由配置

当前AppRoutingModule中的path: '**'规则可以处理全局未匹配的路由，但需要确保功能模块的路由不会拦截全局404规则：

// app-routing.module.ts
const routes: Routes = [
  { path: '', redirectTo: '/select-fund', pathMatch: 'full' },
  { path: 'translate', component: TranslateComponent, pathMatch: 'full' },
  { path: '**', redirectTo: '/not-found', pathMatch: 'full' }, // 全局未匹配路由跳转404
];

2. 简化NotFound模块路由配置

当前not-found-routing.module.ts的嵌套结构冗余，可简化为直接匹配not-found路径，避免不必要的父路由干扰：

// not-found-routing.module.ts
const routes: Routes = [
  {
    path: 'not-found',
    component: LoggedOutLayoutComponent,
    children: [
      { path: '', component: NotFoundComponent } // 子路由为空，直接渲染404组件
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class NotFoundRoutingModule { }

3. 功能模块内部嵌套路由的404处理

如果需要处理某个功能模块内部的未匹配子路由，可在该模块的子路由末尾添加path: '**'规则，重定向到全局404或模块内部的404组件：

// auth.routing.module.ts
const routes: Routes = [
  // 其他路由
  {
    path: '',
    component: DashboardWideLayoutComponent,
    children: [
      {
        path: 'select-fund',
        component: SelectFundComponent,
        canActivate: [AuthGuard, GatingGuard],
      },
      { path: '**', redirectTo: '/not-found' } // 该布局下的未匹配路由跳转全局404
    ]
  },
];

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