How to use router-outlet from lazy loaded children module inside primary router-outlet

Question

as i said here i'm developing an Angular2 app with the following project structure:

I have a primary router-outlet inside "main" component and another router-outlet inside "first" component.

Here is the template of the main component:

<div class="ui menu vertical">
    <a class="item" *ngFor="let item of items" [routerLink]="[item.path]" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">{{item.title}}</a>
</div>
<main>
    <router-outlet></router-outlet>
</main>

Here is the template of the first sub-component:

<div class="ui secondary pointing menu">
    <a *ngFor="let item of menus" class="item" [routerLink]="[item.path]" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">{{item.title}}</a>
    <router-outlet></router-outlet>
</div>

Using this configuration i get the pages of the first component loaded in the main component, instead of the first one.

If i add name property to the inner router, both in the routing setting and in the HTML tag, i get 404 page (created by me) that is loaded in the "app" component (at the top-level of the structure).

What could be the problem?

Answer 1

can you provide routing.module? Probably you didn't configure routes right. Here is the working example:

{ path: 'main', component: MainComponent, , children: [
    {path: 'first',  component: FirstComponent },
    {path: 'second', component: SecondComponent }]

So visiting link main/first will get you to your first page loaded inside router outlet in main page. The key thing is that the main needs to have defined component to render and if the component have <router-outlet> inside it children of main will be rendered.