Angular4 router, Lazy loaded module child routes, named router outlets

Question

I have a wierd question. I need to setup secondary router outlets on the root routing elements of my lazy loaded modules, which have URL bases setup in the app routing module. The explanation seems a bit hard, but I am going to try to explain this.

My app routing has this

{
     path: 'shop',
     loadChildren: 'app/shop/shop.module#ShopModule',
     canActivate: [AuthGuardService]
},

this means that all of the shop routes should begin with

/shop

Now In the shop module I need to have the main content appear in a secondary router-outlet called "ShopContent". For this I have setup 2 test routes, one of which works for me.

The shop tool routing is as follows.

const routes: Routes = [
    {
        path: '',
        component: ShopComponent,
        children: [
            {
                path: 'overview',
                component: ShopMarketingComponent,
                outlet: 'ShopContent'
            },
            {
                path: 'products',
                component: ShopMarketingComponent,
                outlet: 'ShopContent'
            }
        ]
    },
    {
        path: 'test',
        component: ShopComponent,
        children: [
            {
                path: 'overview',
                component: ShopMarketingComponent,
                outlet: 'ShopContent'
            },
            {
                path: 'products',
                component: ShopMarketingComponent,
                outlet: 'ShopContent'
            }
        ]
    }
];

as you can see, the empty '' route and 'test' route both have identical children. I also have the router outlet setup.

<router-outlet name="ShopContent"></router-outlet>

What seems to be my officer problem?

I need to have the "/shop/overview" route open the ShopMarketingComponent in my secondary outlet, yet this routerLink gives me an undefined route error

[routerLink]="['/shop', {outlets: {ShopContent: ['overview']}}]"

Yet this one works completely fine

[routerLink]="['/shop/test', {outlets: {ShopContent: ['overview']}}]"

My question would be, why do I have to put an extra URL segment ( '/test' ) into the mix, so that I can have secondary router outlets? What in gods name am I doing wrong here?

I have the same problem and I am eager to see a solution. Seems to me, that this is an issue in angular-routing. — Stephan LV
same here.. i struggled with this for hours moving config up/down everywhere.. and nothing worked, then i came across this question, looks like bug to me. — Suresh Nagar

DeborahK DeborahK · Accepted Answer · 2017-07-03T19:53:00

Are all of the lazy loaded routes displayed in the secondary outlet? If so, you could try adding the outlet to the lazy loaded route configuration:

{
     path: 'management',
     loadChildren: 'app/management-tool/managementtool.module#ManagementToolModule',
     canActivate: [AuthGuardService],
     outlet: 'managementtoolcontent'
},

Angular4 router, Lazy loaded module child routes, named router outlets

1 Answers