Angular 11应用路由仅内部导航生效，浏览器地址栏直接输入路径无效问题排查

问题描述 #

我构建了一个带有路由模块的Angular 11应用，遇到了如下路由异常：

• 访问域名根路径 http://localhost:4200 时，应用会正确跳转到 dashboard 路径；
• 访问 http://localhost:4200/dashboard 能正常进入仪表盘页面；
• 通过应用内菜单的 RouterLink 或代码导航可以正常访问有效路径（如 http://localhost:4200/management/user-management）；
• 但直接在浏览器地址栏输入该子路由路径时，却始终跳转到dashboard页面，无法进入目标路由。

以下是相关路由代码：

根路由代码 #

const routes: Routes = [
  { path: 'dashboard', canActivate: [AuthenticationGuard], component: fromCore.DashboardComponent },
  { path: 'management', loadChildren: () => import('./management/management.module').then(m => m.ManagementModule), canLoad: [AuthenticationGuard] },
  { path: 'inventory', loadChildren: () => import('./inventory/inventory.module').then(m => m.InventoryModule), canLoad: [AuthenticationGuard] },
  { path: '', redirectTo: 'dashboard', pathMatch: 'full' }
];

Management模块路由代码 #

const routes: Routes = [{
  path: '', component: fromContainers.ManagementComponent,
  children: [
    { path: 'user-management', component: fromContainers.UserManagementComponent },
    { path: 'create', component: fromContainers.UserCreateComponent },
    { path: 'edit/:id', component: fromContainers.UserEditComponent, canActivate: [fromGuards.UserExistsGuard] },
    { path: 'change-password/:id', component: fromContainers.ChangePasswordComponent, canActivate: [fromGuards.UserExistsGuard] }
  ]
}];

请问我的配置哪里出错了？

问题解答 #

经过排查，路由配置本身是完全正常的！

实际问题出在我遗忘了在AppComponent（启动组件）中运行的一个NgRx Effect——这个Effect会无条件派发一个触发导航到dashboard的动作。当直接在地址栏输入子路由时，应用初始化过程中这个Effect会优先执行，强制把路由跳转到dashboard，覆盖了地址栏的目标路径。

目前我已修正该Effect，调整了它的触发逻辑：仅在应用初始加载且没有指定目标路由的情况下，才导航到dashboard页面。修正后，直接在地址栏输入有效子路由路径时，就能正常进入目标页面了。

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