Handle default root and catch-all parameters with deep link system

[WhatsThatItsPat]

Ionic version: (check one with "x")
[ ] 1.x
[ ] 2.x
[x] 3.x

I'm submitting a ... (check one with "x")
[ ] bug report
[x] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Related code:

The new deep link system doesn't handle default root pages nor catch-all parameters while the previous system did.

I'd like to be able to have a page with an empty segment that acts as a default root/home page:

@IonicPage({
  // An empty segment means we will load this as the default root page.
  // Only one empty-segmented page would be allowed per app.
  segment: ''
})

This would mean I wouldn't have to add rootPage: any = HomePage; to app.component.ts.

Secondly, I'd like to have a segment that acts as a fallback if another segment isn't found:

@IonicPage({
  // Load when the path doesn't match any other segments in the app.
  segment: ':usernameOr404'
})

As the param name above suggests, this is how one might display user pages based on a username (or a 404 page if a username is not found or invalid).

I was able to do this with the previous system doing something like this:

IonicModule.forRoot(MyApp, {}, {
  links: [
    {
      // example.com
      segment: '',
      component: HomePage,
      name: 'Home'
    },
    {
      // example.com/someuser
      segment: ':username',
      component: UserPage,
      name: 'User'
    },
    {
      // example.com/list
      segment: 'list',
      component: ListPage,
      name: 'List'
    },
    {
      // example.com/list/id123
      segment: 'list/:id',
      component: DetailPage,
      name: 'Detail'
    }
    // ... other pages ...
  ]
})

[WhatsThatItsPat]

Here's a dup at ionic-app-scripts for the first part about empty segments.

[jgw96]

Hello, thanks for opening an issue with us, we will look into this.

[ey-aroberts]

@PatrickMcD
Using a segment with just a parameter allows you to have a blank segment as the home. You can actually have multiple pages share segment names and have a check to see which component you should navigate to.

Here is how I do it currently. I navigate my whole app through a nav-utility.

let segments = this._serializer.parse(moveToPage);

if(segments[0].name === "PageContentPageComponent" && segments[0].id === ""){
  segments[0].name = "HomePageComponent";
}

// this combines the data the segment has with any data that is not a segment parameter
nav.setRoot(segments[0].name, Object.assign({}, segments[0].data, moveToPageParam))

Here are the pages I have that map
@IonicPage({
segment: ':id'
})
@component({
templateUrl: 'home.html'
})
export class HomePageComponent

@IonicPage({
segment: ':id'
})
@component({
templateUrl: 'page-content.page.html',
})
export class PageContentPageComponent

[ionitron-bot]

Thanks for the issue! This issue is being closed due to inactivity. 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.

Thank you for using Ionic!