Angular4 routing in module and submodule

Question

I plan to create a structure as below (Routes in each routing.ts is to illustrate my idea)

app.module.ts
app.routing.ts  // Routes = [{ path: 'modA', module: moduleA }, { path: 'modB', module: moduleB }]
moduleA
  -- moduleA.module.ts
  -- moduleA.routing.ts  // Routes = [{ path: '', component: ListComponent }, { path: 'new', component: CreateComponent }]
  -- list.component.ts
  -- create.component.ts
moduleB
  -- moduleB.module.ts
  -- moduleB.routing.ts  // Routes = [{ path: 'a', component: AbcComponent }, { path: 'z', component: XyzComponent }]
  -- abc.component.ts
  -- xyz.component.ts

I want to group whatever in moduleA just in moduleA.module including its routing. Same as moduleB.

Then I wish to expose moduleA and moduleB to app.routing for me to register its module path. I expect:

/modA           show list component in moduleA
/modA/new       show create component in moduleA
/modB/a         show abc component in moduleB
/mobB/z         show xyz component in moduleB

How can I create above structure in Angular4? Please provide same workable code if possible.

Teddy Sterne · Accepted Answer · 2017-10-03 15:48:53Z

1

I would suggest that since you are already breaking down the relative pieces into modules that you use lazy-loading which will have a performance increase in your app. By using lazing loading you will get the functionality you want right out of the box. Each module will define its routing relative to itself and the module will be served from the base route specified in the app.routing file.

app.routing.ts

RouterModule.forRoot([{
    path: 'modA',
    loadChildren: './moduleA/moduleA.module#ModuleA'
}, {
    path: 'modB',
    loadChildren: './moduleB/moduleB.module#ModuleB'
}]

moduleA.routing.ts

RouterModule.forChild([{
    path: '',
    component: ListComponent 
}, {
    path: 'new',
    component: CreateComponent
}]

moduleB.routing.ts

RouterModule.forChild([{
    path: 'a',
    component: AbcComponent 
}, {
    path: 'z',
    component: XyzComponent
}]

answered Oct 3, 2017 at 15:48

Teddy Sterne

14.3k2 gold badges49 silver badges52 bronze badges

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

1 Comment

Simon Over a year ago

Thanks, but it doesn't work for me. I am new to angular, I guess I missed something. Possible for you to show full code for app.routing, app.module, moduleA.module and moduleA.routing. Especially that @NgModule part, What to declare, imports and exports?

SBKDeveloper · Accepted Answer · 2017-10-03 15:34:37Z

0

you need to use child routes. The /new will be a child of /modA like so:

Routes = [{ path: 'modA', component: AComponent,
              children: [
                { path: 'new', component: childComponent }
                 ] 
          },
          { path: 'modB', component: BComponent }
         ]

answered Oct 3, 2017 at 15:34

SBKDeveloper

7233 gold badges11 silver badges23 bronze badges

1 Comment

Simon Over a year ago

"I want to group whatever in moduleA just in moduleA.module including its routing". Your approach is let root app.routing to set all path which is not what I want. Thanks anyway.

Collectives™ on Stack Overflow

Angular4 routing in module and submodule

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related