V4 tabs navigate sub page


#1

I want to add a subpage to my tab navigation. Don’t know what I’m missing, I would appreciate any help.

  1. I have created a new page

  2. Added the page in tabs.router.module like

      children: [
         ...,
         {
             path: 'new_path',
             outlet: 'existing_outlet',
             component: NewPage
         }
     ]
    
  3. Added the new page module in tabs.module.ts

but the new route, respectively /tabs/(existing_outlet:new_path), is still unresolved and I’m always forwarded to the root

Any idea?

P.S.: I have followed this example Ionic 4: Navigation inside a tab

P.S.: same as this too https://stackoverflow.com/questions/52577779/ionic-4-angular-6-nested-child-routes-in-tabs


#2

No idea why, but when I use my link in a button it works just fine

<ion-button href="/tabs/(existing_outlet:new_path)">
            <ion-label>Hello</ion-label>
        </ion-button>

but when I use it in a fab, it doesn’t

<ion-fab vertical="bottom" horizontal="end" slot="fixed">
       <ion-fab-button>
                <ion-icon name="arrow-dropup"></ion-icon>
            </ion-fab-button>
     <ion-fab-list side="top">
         <ion-fab-button href="/tabs/(existing_outlet:new_path)">
                    <ion-icon name="create"></ion-icon>
                </ion-fab-button>
            </ion-fab-list>
        </ion-fab>

I have opened an issue https://github.com/ionic-team/ionic/issues/16564