Multiple routes with outlets named Ionic 4

const routes: Routes = [
          {path: '', redirectTo: 'home', pathMatch: 'full'},
          {path: 'home', loadChildren: './home/home.module#HomePageModule',outlet:'primary'},
          {path: 'apple', loadChildren: './apple/apple.module#ApplePageModule', outlet: 'apple'},
          {path: 'banana', loadChildren: './banana/banana.module#BananaPageModule', outlet: 'banana'}
        ];

template:


     <ion-router-outlet main name = "primary"> </ ion-router-outlet>
      <ion-router-outlet name = "banana"> </ ion-router-outlet>
      <ion-router-outlet name = "apple"> </ ion-router-outlet>

I need to have each module loaded in a different outlet, I’ve researched it in several places but it seems that the issue https://github.com/ionic-team/ionic/issues/16619 that refers to this problem is closed but not I managed to solve using the version that supposedly would solve the problem of the ionic / angular .18 beta.

Does anyone have any examples of multiple routes with outlets named Ionic 4 or can you give me a light on why it does not recognize the outlets (banana and apple, it only renders the home) and neither does it change the routes?

4 Likes