Angular子模块路由无需完整URL即可访问异常排查

你的问题出在路由配置错误，以及可能存在模块重复导入的情况，导致子模块路由被当成根路由加载。

1. 修正Admin子模块的路由配置 #

你当前的adminRoutes里第一个路由{ path: 'admin', redirectTo: 'home', pathMatch: 'full' }完全多余——因为父路由已经在App根路由中配置为/admin，子模块的路由应该基于这个父路径定义。正确的配置如下：

const adminRoutes: Routes = [
  // 匹配 /admin 路径，重定向到 /admin/home
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', component: AdminComponent },
  { path: 'garages', component: GarageListComponent },
  { path: 'garage/:garageId', component: ViewGarageComponent },
];

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

调整后，所有admin子路由会自动带上/admin前缀：

• /admin → 重定向到/admin/home
• /admin/home → 加载AdminComponent
• /admin/garages → 加载GarageListComponent
• /admin/garage/1 → 加载ViewGarageComponent

2. 确保AdminModule仅通过懒加载加载 #

检查你的AppModule，绝对不能在imports数组中直接导入AdminModule。如果直接导入，Angular会把AdminRoutingModule里的路由直接添加到根路由中，导致/garage/1这类路径也能匹配到ViewGarageComponent。

你的App根路由配置已经正确使用loadChildren懒加载，只需确保AppModule里没有多余导入AdminModule即可：

// AppModule的imports数组中不要出现AdminModule
@NgModule({
  imports: [
    RouterModule.forRoot(routes),
    // ...其他模块，不要加AdminModule
  ],
  // ...其他配置
})
export class AppModule {}

完成以上两步后，/garage/1这类路径会因找不到匹配路由返回404（或触发你配置的通配符路由），只有带/admin前缀的路径才能访问admin子模块的组件。

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