feat: More flexibility with the ion-router-outlet

[Ross-Rawlins]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already include this feature request, without success.

Describe the Feature Request

I think it would be advantageous for the ion router outlet to better support custom layouts especially with PWA's supporting desktop and mobile. It would be great if you could specify your caching strategy for the pages as well has have better layout options with with nested child routes

Describe the Use Case

In this screen shot on desktop the layout requires a shared top and side section that is responsive ie will float underneath each other. The issues I faced when creating this.

1. When using the ion router outlet there was some difficulties with getting the the child content to be set in its position and not overlap the parent content(position: absolute), if I wrapped the router outlet with with a container position relative this fixed the issue but made it really difficult to with scrolling
2. When a user is on a page on desktop or mobile sometime having multiple scroll areas ruin the user experience. In this situation you scroll the parent to get to the child and then scroll the child but when you scroll back up it only scrolls the child.

The below example is a very common page layout where you have a shared section at the top with a nested section that will change based on a URL

Describe Preferred Solution

1. Scrolling Make a static property for the route that tells it not to create its own scroll area or to use the parents scroll area. This can give a dev control of when and where to use this.

2. Caching The tabs component where the pages are not reloaded unless the parent is reloaded is great, but I couldn't find anything in the ionic routing strategy to apply the same logic to non tabs pages with child routes. Add a static routing param that allows you to prevent the reloading of child routes or a specific page.

2.Layout A set/solid approach to nesting ion-router-outlets in child pages, either with paralax headers or with a property for it to only site inside its desired area

Describe Alternatives

I used the router-outlet on the child pages and then I had to remove ion content from the children, the issue is I then lost the use of ionic lifecycle events for the children, I lost the user experience of the child routes animating. It would be nice if ionic supported this or had a set guide on this.

Related Code

Parent Page `

Child Page CHILD content ` The above code is the side bar example I showed with the image above

Additional Information

No response

[liamdebeasi]

Thanks for the report. Do you have a code example with a routing config that illustrates the problems you are running into?

[Ross-Rawlins]

const routes: Routes = [
  {
    path: '',
    component: childPageComponent,
    children:[
      {
        path: 'lazyloadedchild',
        loadChildren: () => import('./pages/lazyloadedchild/lazyloadedchild.module').then( m => m.LazyloadedchildPageModule)
      },
    ]
  },

];

[liamdebeasi]

Thanks for the follow up. I'm not sure I understand the issue in this case. The childPageComponent would have an ion-router-outlet that renders the content for lazyloadedchild.

Are you trying to build a desktop-focused application? Ionic Framework focuses on mobile apps, so I'm not sure we would want to add this functionality if it only benefits desktop apps.

[Ross-Rawlins]

Yes it is for desktop, the app is meant to be a single code base for web/desktop and mobile. There functionality per platform is identical so to have two different projects would be a pain to maintain. These few changes could make one code base all platforms a reality.

[liamdebeasi]

Do you have a sample repo I can try that shows the issues? The patterns you described in the original post should be achievable.

[Ross-Rawlins]

Thats the thing using more than one ion router outlet works fine on a reload but when you navigate away and come back it stops working. I thought this would work out hte box as well but for some reason it just stops working when you navigate from one parent to another.

[liamdebeasi]

It sounds like this is related to https://github.com/ionic-team/ionic-framework/issues/18197. We have plans to revamp the router integration (including Ionic Angular) to eliminate these kinds of bugs as well as introduce better defined usage patterns on the docs.

[Ross-Rawlins]

Thats great to hear. To make it work for me now I removed the outlet and converted my pages into standard components and placed them in a slider so it mimics the ablity to swipe pages to navigate and even though the URL is updating I am not having to worry about outlet not loading.

Have you got a roadmap/comments on changes/timeline where this plan is listed. And yes that is the problem I am having. But that is only one half of the problem. Having more control with layout for desktop designs would be great, or a single scroll area even better.

[liamdebeasi]

We do not have a public roadmap, but work on router improvements is currently underway and is a priority for the team. As I mentioned previously, we do not have plans to add more desktop-specific functionality to Ionic as we continue to focus on mobile applications. However, you can subscribe to https://github.com/ionic-team/ionic-framework/issues/18197 for updates on the nested outlet issue.

I am going to close this in favor of #18197, but let me know if you have any questions.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.