Named and Multiple Router-Outlets (Auxiliary Routes)

Ionic Framework
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

1 Like
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
9

I use the angular outlet-router as a workaround but I loose the history for the back button. When can we expect a fix on this ?
Anybody has a tips to avoid this ?
Thanks

10

While waiting for auxiliary routes to work properly in Ionic, as a workaround for anyone getting here - I am using ModalController and/or PopoverController to show my arbitrary modal components wrapped into own modal service.