Named and Multiple Router-Outlets (Auxiliary Routes)

#1

Hey folks,

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

app.component.html:

<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?

Oliver

#2

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'},
]
#3

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)

#4

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

#5

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.

#6

@webprofusion Using a variable is not lazy loading right?

1 Like
#7

I created a new Issue for that https://github.com/ionic-team/ionic/issues/17825

1 Like
#8

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

1 Like