Angular2 Define child routes from sub-routing module

Question

First of all, I've seen this post which seems to be close to my issue but I admit I got kind of lost : How to route to a Module as a child of a Module - Angular 2 RC 5

I'll try to make it simple :

I have my app.component.html file which has a <router-outlet>.
In this first outlet, my MasterModule loads the MasterComponent which has another <router-outlet>. From my MasterRoutingModule, I can then define my child routes from my MasterComponent.
I have my other module (EquipmentSLModule), which has his own routes, and my aim is to add child routes (to be loaded inside my second <router-outlet> from MasterComponent) from my EquipmentSLRouting.

Is there a way to do that ?

N.B : I know there is no code yet, I'll edit and add some in a while.

score 1 · Answer 1 · answered Mar 07 '17 at 18:39

Let's see if I understand what your asking. Each Module can have it's own routing. You can then reference that routing as children of a path like this:

In your AppRouting, load the routes from the :

export const ROUTES: Routes = [
    {
        path: 'masterRoute',
        loadChildren: './path/to/MasterRoutingModule.module#MasterRoutingModule' }
    }
]

In your MasterRouting, load the EquipmentSLModule's routes as well to utilize the <router-outlet> in the root component of the MasterModule:

export const ROUTES: Routes = [
    { path: '', component: MasterComponent }, //root
    {
        path: 'otherRoute',
        loadChildren: './path/to/EquipmentSLModule.module#EquipmentSLModule' }
    }
]

This will load routes from the EquipmentSLModule as routes in the MastRoutingModule.

In your EquipmentSLModule you will import the routes for that module with RouterModule.forChild(routes), same for the MasterModule. The AppModule will use RouterModule.forRoot(routes).

raja reddy · Accepted Answer · 2017-03-07T20:28:35.467

1

If you want to render your loaded module under a component <router-outlet></router-outlet> hood you need to config as children's of particular component. I made a quick example for what you need, check out here is the link Plunker

  imports: [BrowserModule,
      RouterModule.forRoot([{
              path: '',
              pathMatch: 'full',
              redirectTo: '/home'
          },
          {
              path: 'home',
              component: AppHome
              children: [{
                  path: 'ModuleA',
                  loadChildren: 'src/ModuleA'
              }]
          },
      ])
  ]

edited Mar 07 '17 at 20:28

answered Mar 07 '17 at 20:22

raja reddy

372
2
9

@alex-beugnet is it what your thinking or it's different? – raja reddy Mar 07 '17 at 20:38
Yes, this seems pretty good, as the other answers ! The plunkr really helped. Thanks a lot – Alex Beugnet Mar 07 '17 at 20:44
Do I need to go through lazy loaded modules only ? – Alex Beugnet Mar 07 '17 at 20:44
or else you can import the module as a regular import. – raja reddy Mar 07 '17 at 20:51
I mean, in your plunkr you define the child route as follow : `children: [{path: 'ModuleA', loadChildren: 'src/ModuleA'}` Can I just define some child routes from the `app.ts` and some other child routes from the `ModuleA.ts` ? – Alex Beugnet Mar 07 '17 at 20:57
yes you can add.`children: [{path: 'ModuleA', loadChildren: 'src/ModuleA'},{path: 'home2', component: AppHome2}]` – raja reddy Mar 07 '17 at 21:01

score 0 · Answer 3 · answered Mar 07 '17 at 18:29

Do something like this :

   //... 
   const EquipmentSLRoutes: Routes = [
      { path: 'equipment-sl',  component: EquipmentSLComponent },
      { path: 'equipment-sl/:id', component: EquipmentSLDetailComponent }
    ];

    @NgModule({
      imports: [
        //...
        RouterModule.forChild(EquipmentSLRoutes)
      ],
      exports: [
        //...
        RouterModule
      ]
    })
    export class EquipmentSLModule { }

add this module to your MasterModule imports array.

Angular2 Define child routes from sub-routing module

3 Answers3