Ionic-framework: [v4] ion-button href ok, ion-fab-button same href not ok

[peterpeterparker]

Bug Report

Ionic Info
Ionic Angular v4-beta.17

Describe the Bug
I have added a "sub-page" to my tab routing app. When I navigate using an ion-button the navigation is ok but when I use the exact same navigation in an ion-fab-button the navigation "doesn't work". With that I mean that it seems that the route isn't resolved as I'm redirected to the root/default path.

Related Code
OK:

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

Not ok:

<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>

Expected Behavior
Same behavior with ion-fab-button as with ion-button

Additional Context
Forum -> https://forum.ionicframework.com/t/v4-tabs-navigate-sub-page/149270

Side note
I don't think it's linked to beta.17, I observed the same effect with beta.15

[manucorporat]

We are introducing a small change in next beta, where you have to use angular's routerLink in order to navigate using the angular router, we tried to make href to work, but there are many edge cases where it's not. I would suggest to start migrating to [routerLink] all together, it should be as easy as replacing href with routerLink

[peterpeterparker]

@manucorporat do you have an example of navigation with routerLink and tabs?

when I do routerLink="/tabs/(home:home)" or routerLink="/tabs/home" or similar I face an error Cannot match any routes...

[eatyourpeas]

works for me: routerLink="/tabs/{{home}}"

[mbriantoc]

@peterpeterparker just replacing the href for routerLink didn't work for me either, so I read about Angular Auxiliary Routes and found a different syntax. I changed from href="tabs/(mytab:new)" to [routerLink]=" [ '/tabs', { outlets: { 'mytab': [ 'new' ] } } ]

Hope this helps!

[peterpeterparker]

@mbriantoc cool thx, will give a try next time I'll use tab

[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.