Ionic-framework: DeepLinker doesn't work smooth with tabbed pages yet

[tleguijt]

I started using DeepLinker since RC.0 and now working on it with RC.2 for an web application (so not native yet).
I got it to work fine with most of the pages; navigating to a specific page using an URL works fine and while navigating the correct URL is shown in the browsers address bar.

But somehow I can't get it to work with a tabbed page correctly.

To quickly describe my situation; a part of the application has the following page structure:

Home/Root                                           (/)
 |-- Program                                        (/program)
 |         |- Program Detail page (tabbed)          (/program/:id)
 |                            |- Info (tab)         (/program/:id/info)
 |                            |- Map (tab)          (/program/:id/map)
 |-- Performers
 |         |- Performer Detail page (tabbed)        (/performers)
 |                            |- Info (tab)         (/performers/:id/info)
 |                            |- Performances (tab) (/performers/:id/shows)

To have the tabbed page controlling its own navigation and being able to assign URL segments to it is a nice feature. For my use-case not a required one but nice to have IF it would work correctly. Right now this is only causing trouble.

Expected behaviour
I would expect to be able to define this structure as followed:

    {segment: 'program', component: ProgramPage, name: 'Program'},
    {segment: 'program/:id', component: ProgramDetailPage, name: 'ProgramDetail'},
    {segment: 'program/:id/info', component: ProgramInfoTab, name: 'ProgramDetailInfo'},
    {segment: 'program/:id/map', component: ProgramMapTab, name: 'ProgramDetailMap'},     
    {segment: 'performers', component: PerformersPage, name: 'Performers'},
    {segment: 'performers/:id', component: PerformerDetailPage, name: 'PerformerDetail'},
    {segment: 'performers/:id/info', component: PerformerInfoTab, name: 'PerformerDetailInfo'},
    {segment: 'performers/:id/shows', component: PerformerShowsTab, name: 'PerformerDetailShows'},   
 ```

and be done with it.
(or: omit the tabs in the DeepLinker config. I don't really need to be able to navigate to a specific tab, I want to navigate to the tabbed page itself and just have the first tab open. But then again; I can image for some project this might be a nice thing to have).

But this gives me strange results. When I navigate from the Program overview page to a ProgramDetail page I get ``/program/427274/tab-0/program/:id/info`` as the URL.

The ``tab-0`` I could fix by defining the ``tabUrlPath`` in my template code, and I could set it to 'info' so the URL would be ``/program/427274/info/program/:id/info``.
The first three segments of the URL are correct, but probably the DeepLinker config thinks it is not enough and appends the same segments at the end of the URL.

So, one way for me to fix this was to leave the segment in the DeepLinker config empty, so it would become:

{segment: 'program', component: ProgramPage, name: 'Program'},
{segment: 'program/:id', component: ProgramDetailPage, name: 'ProgramDetail'},
{segment: '', component: ProgramInfoTab, name: 'ProgramDetailInfo'},
{segment: '', component: ProgramMapTab, name: 'ProgramDetailMap'},     
{segment: 'performers', component: PerformersPage, name: 'Performers'},
{segment: 'performers/:id', component: PerformerDetailPage, name: 'PerformerDetail'},
{segment: '', component: PerformerInfoTab, name: 'PerformerDetailInfo'},
{segment: '', component: PerformerShowsTab, name: 'PerformerDetailShows'},

And this works fine to a certain extent: If I open the app from /program and then navigate to one of the detail pages, the URLs are working fine.
However, specifying empty segments will cause one of the tab pages to be loaded when I open up the root of the application (/). So this is still not the final solution for me.

Since the Tabs API provides an ``tabUrlPath``, the way I would expect this to work is by **not** defining the Tabs itself in the DeepLinker config, but have the NavController of the Tabs append the correct url segment to the already existing URL.

So ideally this configuration should be enough to get the configuration right:

{segment: 'program', component: ProgramPage, name: 'Program'},
{segment: 'program/:id', component: ProgramDetailPage, name: 'ProgramDetail'},
{segment: 'performers', component: PerformersPage, name: 'Performers'},
{segment: 'performers/:id', component: PerformerDetailPage, name: 'PerformerDetail'},

```

And with tabUrlPath set to either 'info' or 'map', the Tabs can append this to program/:id so that it becomes program/:id/info

Two reasons why I think this way of configuration would be ideal:

• Since Tabs has its own NavController, the way users should navigate through it (and the URL segment that comes with it) should be configured solely in the Tabs itself (and yes, the tabUrlPath is perfect for that)
• You don't have to clutter your main DeepLinker config with all the tab pages. Just focus on the main application structure

I either missed something important which isn't documented yet, or the internals of DeepLinker should be adjusted a bit more.

[morrisonbrett]

Thanks for writing this up. It IS a requirement for me to have a unique URL navigate to a specific tab.

[tleguijt]

For those who are looking for a quick work-around, the following worked for me:
Comment out this.parent.registerChildNav(this); in tabs.js:

--- a/node_modules/ionic-angular/components/tabs/tabs.js
+++ b/node_modules/ionic-angular/components/tabs/tabs.js
@@ -31,7 +31,7 @@ export var Tabs = (function (_super) {
         this._sbPadding = config.getBoolean('statusbarPadding');
         this.tabsHighlight = config.getBoolean('tabsHighlight');
         if (this.parent) {
-            this.parent.registerChildNav(this);
+            // this.parent.registerChildNav(this);
         }
         else if (viewCtrl && viewCtrl.getNav()) {
             this.parent = viewCtrl.getNav();

[morrisonbrett]

I ended up abandoning tabs because of this! I rolled my own "tab bar" styling, with active, etc. Now each "tab" is a unique URL.

[billygerhard]

+1 I have similar requirements and I want to upvote this to be prioritizes as well.

[yunderboy]

:+1: I'm experiencing the excat same bug

[yunderboy]

Has this ever been resolved?...

[jjjhanreyyy]

I hate this bug. Might as well stop developing with Ionic because of this.

[prantikv]

This is still an issue in 2018. Looks like its time to say goodbye to ionic as @jjjhanreyyy said.

[prantikv]

Does this work with lazy loaded components?

[lukealford]

Same bug here, seems to be no way to fix it, this is holding up development 👎

[ionitron-bot[bot]]

Thanks for the issue! We have moved the source code and issues for Ionic 3 into a separate repository. I am moving this issue to the repository for Ionic 3. Please track this issue over there.

Thank you for using Ionic!

[ionitron-bot[bot]]

Issue moved to: https://github.com/ionic-team/ionic-v3/issues/58