Angular 13应用无法路由到任何组件问题求助

问题诊断 #

核心问题是路由顺序配置错误：你在AppRoutingModule（forRoot根路由）中设置的**通配符路由，会优先于AuthModule和UserModule的forChild子路由被注册，导致所有非main的路径（包括discover）都会被**匹配并强制重定向到根路径''；同时迁移后UserModule的路由被压在通配符路由之后，永远无法被触发匹配。

解决方案 #

1. 调整通配符路由的位置 #

将AppRoutingModule中的**通配符路由移除，确保它是整个路由配置的最后一项（放在最后导入的模块路由中）：

修改AppRoutingModule：

const redirectUnauthorizedToLogin = () => redirectUnauthorizedTo(['']);

let routes: Routes = [
{
    path: 'main',
    component: MainComponent,
    children: [
      { path: '', component: RecipesContainerComponent },
      { path: 'recipe', component: RecipeComponent },
      { path: 'recipe-list', component: RecipesContainerComponent },
      { path: 'recipe/:id', component: RecipeComponent },
      { path: 'view-recipe/:id', component: ViewRecipeComponent },
    ],
    // 已移除守卫则删除此行
    // ...canActivate(redirectUnauthorizedToLogin),
},
// 移除原有的**通配符路由
];

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

在UserRoutingModule中添加通配符路由作为最后一项：

const routes: Routes = [
{
  path: 'discover',
  component: DiscoverComponent,
},
// 通配符路由放在最后，仅匹配未被其他路由处理的路径
{
  path: '**',
  redirectTo: '',
  pathMatch: 'full',
},
];

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

2. 确认AppComponent包含路由出口 #

检查app.component.html模板，确保存在路由渲染的必要出口：

<router-outlet></router-outlet>

没有这个标签，所有路由组件都无法在页面上渲染。

3. 调整模块导入顺序 #

确保UserModule在AppModule的imports数组中是最后一个导入的模块，这样它的路由会被追加到所有路由的末尾：

@NgModule({
// ...其他配置
imports: [
 BrowserModule,
 AppRoutingModule,
 AuthModule,
 // 确保UserModule最后导入，保证路由顺序正确
 UserModule,
 ReactiveFormsModule,
 provideFirebaseApp(() => initializeApp(environment.firebase)),
 provideAuth(() => getAuth()),
 provideFirestore(() => getFirestore()),
 BrowserAnimationsModule,
],
// ...其他配置
})
export class AppModule {}

4. 验证路由功能 #

启动应用后测试以下路径：

• http://localhost:4200/：应加载LoginPageComponent
• http://localhost:4200/main：应加载MainComponent及其子组件
• http://localhost:4200/discover：应加载DiscoverComponent

如果仍有问题，打开浏览器开发者工具，查看控制台是否有组件加载错误，或网络标签是否有资源请求失败。

额外建议 #

对于非核心模块，推荐使用懒加载方式引入，避免路由顺序冲突：

// 在AppRoutingModule中替换直接导入UserModule
{
  path: 'discover',
  loadChildren: () => import('./user/user.module').then(m => m.UserModule)
}

这种方式会自动维护路由顺序，无需手动调整模块导入顺序。

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