4

I would like to use nested routing for complex pages inside an ionic app. I leave the main ion-router-outlet in tact, and can navigate between top-level pages without any problems. Inside those top level pages, deep inside content, I would like to use child routes to show content, and deep linking should work, so the angular router is ideal for this using router-outlet. However, after navigating through the app to a different top-level page and returning to a previously displayed top-level page, the routing for that page stops working entirely. The URL is updated though.

I have already tried using ion-tabs, removing lazy loaded modules, and have enabled all error reporting and route tracing. No errors are reported, routes seemingly activate, but the routing just does not work.

I have tried using ion-tabs and nested ion-router-outlets, none of which work.

See https://github.com/johanvdb/ionic-4-router-issue

The expected outcome should be nested components rendering in the relevant router-outlets without any problems.

Johan van den Berg
  • 61
  • 4

1 Answers1

0

You must have several app.routing.module.ts, The parent routing module and as many children as you want; In the parent routing module you must refer to the children in the following way:

app.routing.module.ts

const routes: Routes = [
  { path: '', redirectTo: 'login', pathMatch: 'full' },
  { path: 'login', loadChildren: './auth/login/login.module#LoginPageModule' },
  { path: 'register', loadChildren: './auth/register/register.module#RegisterPageModule' },
  {
    path: 'members',
    loadChildren: './members/member-routing.module#MemberRoutingModule'
  }
];

In this example member.routing.module.ts is the child routing module and app.routing.module.tsis the main one (parent).

In member.routing.module.ts you should define the rutes /members/{somepage}

María Cristina Fernández López
  • 417
  • 2
  • 9
  • 29
  • In the example repository that I added at the top, I already have every page in its own module with loadChildren. This is the default when generating pages with ionic g page. It is definitely possible to further extend just the routes out into their own modules, but this is an anti-pattern given how it used to be the default years ago and is no longer preferred by ionic. If somehow the router outlet needed to use module resolution to identify the correct outlet to use, certainly the current separation would be equal? – Johan van den Berg May 03 '19 at 09:51
  • I do not understand your question very well, I have seen your code and it is correct, but I do not see any children.routin.module.ts you only have the app.component.routing.module.ts, so... children.routing.module.ts is generally used to separate routes to which other modules do not have access, this is done with AuthGuard services. Can you explain me your question better? – María Cristina Fernández López May 03 '19 at 10:08
  • If you look at https://youtu.be/6PzQ1dH8HwA you will see that the application already works, but only until you navigate away from one module to another. The first module then suddenly stops working. So the fact that there are now two router-outlets that have been loaded seems to mess around with ionic and angular's routing. This entire application works just fine in a raw angular application. – Johan van den Berg May 03 '19 at 10:55
  • In this [example](https://stackblitz.com/edit/angular-multi-router-outlet?file=app%2Fapp.component.ts) they usig two router modules. Is this what you mean? – María Cristina Fernández López May 03 '19 at 11:29
  • Nope, I mean nested router-outlets. See https://angular-multi-router-outlet-cockfu.stackblitz.io / https://stackblitz.com/edit/angular-multi-router-outlet-cockfu – Johan van den Berg May 03 '19 at 13:36