Named and Multiple Router-Outlets (Auxiliary Routes)


Hey folks,

how could I achive using two different router outlets (e.g. primary and secondary) and setting routes?


<ion-router-outlet main name=“primary”></ion-router-outlet>
<ion-router-outlet name=“secondary”></ion-router-outlet>

Setting routes like:

[routerLink]="[’/’, {outlets: {‘primary’: [‘payment’], ‘secondary’: [‘payment-success’]}}]"

For some reason it does not work at all :frowning:

Anyone available with a working example?



Why don’t you use the app-routing module:

const routes: Routes = [
{path: '/', loadChildren: './pages/primary/primary.module#PrimaryPageModule', outlet: 'primary'},
{path: 'secondary', loadChildren: './pages/secondary/secondary.module#SecondaryPageModule', outlet: 'secondary'},

Did you ever get multiple router-outlets working? I’m trying to do the same thing and it generally just starts complaining that the route couldn’t be matched (I’m using app-routing to specify the outlet, and also trying the code-first router.navigate method)


@webprofusion @odorakel did you ever resolve this, We are in the same error


No I gave up, I assume I was doing it wrong and never figured out the correct way to get it working. Used a variable to switch views instead.


@webprofusion Using a variable is not lazy loading right?

1 Like

I created a new Issue for that

1 Like

We created also an plain angular project which is doing the same thing and where the behavior is working like expected

1 Like