Angular中loadChildren路由配置失效问题求助

你遇到的核心问题是在AppModule中直接导入了EventsModule和UserModule，这完全绕过了loadChildren的懒加载机制，同时导致特性模块的路由被直接注册到根路由树中，和你配置的顶层路由规则冲突，所以才会出现根路径直接显示事件列表、指定路由无效的情况。

解决步骤： #

1. 移除AppModule中对特性模块的直接导入
   打开app.module.ts，把imports数组里的EventsModule和UserModule删掉，修改后的代码如下：

   import { BrowserModule } from '@angular/platform-browser';
   import { NgModule } from '@angular/core';
   import { RouterModule } from '@angular/router';
   import { appRoutes } from './app.routes';
   import { AppComponent } from './app.component';
   import { SharedModule } from './common/shared.module';
   import { NavBarComponent } from './nav/navbar.component';
   import { EventService } from './events/event.service';
   import { ToastrService } from './common/toastr.service';
   import { NotFoundComponent } from './utility/not-found.component';
   // 移除特性模块的直接导入
   // import { UserModule } from './user/user.module';
   // import { EventsModule } from './events/events.module';
   
   @NgModule({
    declarations: [
     AppComponent,
     NavBarComponent,
     NotFoundComponent
    ],
    imports: [
     BrowserModule,
     SharedModule,
     // 移除这里的特性模块导入
     // EventsModule,
     // UserModule,
     RouterModule.forRoot(appRoutes)
    ],
    providers: [
     EventService,
     ToastrService
    ],
    bootstrap: [AppComponent]
   })
   export class AppModule { }
   

2. 确认特性模块的路由配置保持正确
   你的event.routes.ts配置是完全正确的，不需要添加events前缀——因为loadChildren已经把/events路径和EventsModule关联起来了，子路由只需要定义相对路径即可：

   export const eventRoutes: Routes = [
    { path: 'create', component: CreateEventComponent, canDeactivate: [UnsavedNewEventGuard] },
    { path: ':id', component: EventDetailsComponent, canActivate: [ValidEventGuard] },
    { path: '', component: EventsListComponent }
   ];
   

3. 同步修正UserModule的配置
   对UserModule执行同样的操作：从AppModule的imports中移除它，确保UserModule内部的路由配置是相对路径（比如login、profile这类，而非user/login），并且通过RouterModule.forChild(userRoutes)注册子路由。

问题根源解释： #

当你在AppModule中直接导入特性模块时，Angular会在应用启动时就加载该模块的所有内容，包括它的路由。这些路由会被直接合并到根路由树中，此时你在appRoutes中配置的loadChildren规则就被彻底忽略了——因为模块已经被预加载完成，不需要再通过懒加载触发加载。

而正确的懒加载逻辑是：根模块不直接导入特性模块，只通过loadChildren告诉Angular：当匹配到指定父路径时，才去加载对应的特性模块，这样特性模块的路由会自动作为子路由挂载到指定的父路径（比如/events）下，你的所有路由规则就能正常生效了。

内容的提问来源于stack exchange，提问作者Green Grasso Holm