How to do routing on nested modules in Angular?

Question

I got a Module hierarchy like this:

app

-- module1
   - submodule1
   - submodule2

I want to know how to do the routing from submodules to modules, and from modules to the main app module.

So far I can route from modules to main app module like this:

app.module.ts - Main Module

...imports

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    ...
    AppRoutingModule,

    //Feature Modules
    Module1,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

app.routing.ts

import { RouterModule } from '@angular/router';

export const AppRoutingModule = RouterModule.forRoot([
  { path: '', component: AppComponent },
  { path: 'module1', loadChildren: './feature/module1/module1.module#Module1' }
]);

module1.module.ts - Level 1 Module

...imports

@NgModule({
  imports: [
    SubModule1,
    SubModule2,
    Module1RoutingModule
  ],
  declarations: [Module1Component],
})
export class Module1 { }

module1.routing.ts

import { RouterModule } from '@angular/router';
import {Module1Component} from "./module1.component";

export const Module1RoutingModule = RouterModule.forChild([
  { path: '', component: Module1Component },
  { path: 'submodule1', loadChildren: '.submodule1/submodule1.module#Submodule1Module' },
]);

And here's where I don't know how to route the submodule routes...

submodule1.module.ts - Level 2 Module

...imports

@NgModule({
  imports: [
    Submodule1RoutingModule
  ],
  declarations: [Submodule1Component],
})
export class Submodule1Module { }

Here's where I need help figuring out how to route:

submodule1.rounting.ts

import { RouterModule } from '@angular/router';
import {Submodule1Component} from "./submodule1.component";

export const Submodule1RoutingModule = RouterModule.forChild([
  { path: '', component: Submodule1Component }
]);

Christian Abella · Accepted Answer · 2017-05-14 23:44:18Z

3

You can add a 'children' in your route to define the sub-routes. Sub-routes defined here will only be visible inside the submodule route.

{ path: 'submodule', component: Submodule1Module,
    children: [
      { path: 'sub-route1', component: SubRoute1 },
      { path: 'sub-route2', component: SubRoute2 }
    ]
}

answered May 14, 2017 at 23:44

Christian Abella

5,7872 gold badges33 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to do routing on nested modules in Angular?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related