Angular中无需children属性实现嵌套模块路由的问题咨询

Alright, let's tackle this problem. You want to build a nested route structure like ROOT/module-a/module-b without relying on the children property, keeping each module's routing configuration fully independent. Here are two solid approaches to make this happen, depending on whether you prefer lazy loading or eager loading for your modules:

Approach 1: Lazy Loading (Recommended for Large Apps) #

This method keeps each module's routing clean, centralizes path definitions in the root route, and leverages lazy loading to optimize app performance.

Step 1: Configure the Root Route (AppRoutingModule) #

We directly define the full path for each module and specify the lazy loading path:

const routes: Routes = [
  // Maps /module-a to ModuleAModule
  {
    path: 'module-a',
    loadChildren: () => import('./modules/module-a/module-a.module').then(m => m.ModuleAModule)
  },
  // Maps /module-a/module-b directly to ModuleBModule
  {
    path: 'module-a/module-b',
    loadChildren: () => import('./modules/module-b/module-b.module').then(m => m.ModuleBModule)
  },
  // Default redirect to ModuleA
  { path: '', redirectTo: '/module-a', pathMatch: 'full' }
];

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

Step 2: Configure ModuleA's Routing (ModuleARoutingModule) #

ModuleA's route only needs to handle its own root path (since the root route already points /module-a to this module):

const routes: Routes = [
  // Loads ModuleAComponent when accessing /module-a
  { path: '', component: ModuleAComponent }
];

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

Step 3: Configure ModuleB's Routing (ModuleBRoutingModule) #

Similarly, ModuleB's route doesn't depend on any parent module configuration—it just handles its own root path (the root route already maps /module-a/module-b here):

const routes: Routes = [
  // Loads ModuleBComponent when accessing /module-a/module-b
  { path: '', component: ModuleBComponent }
];

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

Approach 2: Eager Loading (Ideal for Small Apps) #

If lazy loading isn't a requirement, you can define the full path directly in each module's routing and import them into the root module:

Step 1: Configure ModuleA's Routing (ModuleARoutingModule) #

Define the full path for ModuleA directly in its own routing file:

const routes: Routes = [
  { path: 'module-a', component: ModuleAComponent }
];

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

Step 2: Configure ModuleB's Routing (ModuleBRoutingModule) #

Define the full nested path for ModuleB in its routing file:

const routes: Routes = [
  { path: 'module-a/module-b', component: ModuleBComponent }
];

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

Step 3: Import Routes into the Root Module (AppModule) #

Import both module routes into AppModule, and use the root route for default redirects only:

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    ModuleARoutingModule,
    ModuleBRoutingModule,
    RouterModule.forRoot([{ path: '', redirectTo: '/module-a', pathMatch: 'full' }])
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Key Notes #

• Both approaches completely avoid the children property—each module's routing config is independent, with no reliance on parent module routing setup.
• If you need nested component rendering (e.g., ModuleB displays inside ModuleA's <router-outlet>), this no-children approach won't work—Angular needs parent route context for that scenario. But if you only need the path structure to be nested while components render independently (replacing the root <router-outlet>), these methods work perfectly.

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