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?

Do you mean to add the "sub-components" that belong to the first component in the `exports` property of `ngModule` in the `first-section-module.ts`? — smartmouse, Oct 19 '16 at 08:37
yes, components need to be exported upto the level of parent component you are using, App->Mod1->Mod2 (compShare), now you are using App(compShare)... export it from mod2 and mod1 — Akanksha Gaur, Oct 19 '16 at 08:51
Have i to use naming for outlet? I mean use `name` property. — smartmouse, Oct 19 '16 at 09:00
I doubt it, as its a separate module. but u need to configure routes in the module you are using the component — Akanksha Gaur, Oct 19 '16 at 09:05
http://stackoverflow.com/questions/39228826/rc5-lazy-loading-of-ngmodule-in-different-router-outlet — gtzinos, Apr 25 '17 at 12:11

score 0 · Answer 1 · answered Jan 17 '17 at 10:00

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.

Your answer is invalid. He asked about Lazy Loading. – Leo Caseiro Apr 11 '17 at 00:41 — Leo Caseiro, Apr 11 '17 at 00:41

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

1 Answers1