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

Viewed 1626

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?

1 Answers
Related