Angular12懒加载路由不生效，访问指定路径自动跳转dashboard如何解决？

问题原因 #

1. 根模块错误导入懒加载模块 #

你在app.module.ts的imports数组中手动引入了CoreModule、ClaimModule、DependentModule、ProfileModule四个配置了懒加载的模块，这会导致两个问题：

• Angular会在应用启动时直接加载这些模块，不会触发你配置的懒加载逻辑
• 这些模块内部的路由会优先注册，优先级高于AppRoutingModule中定义的懒加载路由规则

2. 通配符路由位置错误 #

你在core-routing.module.ts中配置了path: '**'的通配符路由，通配符路由会匹配所有未被前面规则命中的路径。由于CoreModule被提前导入到根模块，它内部的通配符路由会先于AppRoutingModule里的/profile、/dependent等路由生效，访问这些路由时会直接命中通配符规则，重定向到dashboard。

解决方案 #

第一步：删除根模块中手动导入的懒加载模块 #

修改app.module.ts的imports数组，移除四个懒加载模块的引入：

// app.module.ts
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    FormsModule,
    RouterModule,
    ModalModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

第二步：调整通配符路由位置 #

将core-routing.module.ts中的通配符路由移动到app-routing.module.ts所有路由的末尾（通配符路由必须放在全局路由的最后才能正常工作）：

// app-routing.module.ts
const routes: Routes = [
  { path: 'login', component: LoginComponent },
  {
    path: '',
    canActivate: [AuthGuard],
    loadChildren: () => import('./core/core.module').then(m => m.CoreModule)
  },
  {
    path: 'dependent',
    canActivate: [AuthGuard],
    loadChildren: () => import('./modules/dependent/dependent.module').then(m => m.DependentModule)
  },
  {
    path: 'profile',
    canActivate: [AuthGuard], // 建议补充权限校验，避免未登录访问
    loadChildren: () => import('./modules/profile/profile.module').then(m => m.ProfileModule)
  },
  // 通配符路由移到此处
  {
    path: '**',
    redirectTo: '/dashboard',
    pathMatch: 'full'
  }
];

第三步：删除Core路由中的通配符规则 #

修改core-routing.module.ts，移除原有的通配符路由：

// core-routing.module.ts
const routes: Routes = [
  {
    path: '',
    component: LayoutComponent,
    children: [
      { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
      { path: 'dashboard', loadChildren: () => import('./../modules/dashboard/dashboard.module').then(m => m.DashboardModule) },
    ]
  }
];

可选优化 #

如果你希望/profile、/dependent等路由也复用LayoutComponent的头部、侧边栏、页脚布局，可以将这些路由移动到core-routing.module.ts的children数组中，不需要在根路由配置。

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