Ionic 4 routing without tabs prefix


#1

Hello,

I am testing Ionic 4 and I am stuck since this morning on a point that could be silly for some, but as I am new in the use of Ionic / Angular I can not move forward. I hope to find a solution to my problem by submitting it to you.

When I start a project with Ionic 4 the Starter Type “tabs”, the urls are in this format:
http://localhost:8100/tabs/(home:home)
http://localhost:8100/tabs/(about:about)
http://localhost:8100/tabs/(contact:contact)

The application will be the mobile version of an existing site and we would like the urls to correspond between the two versions mobile / desktop

How can we have urls in this format:
http://localhost:8100/home
http://localhost:8100/about
http://localhost:8100/contact

Thanks for your help.


#2

Hi @codiqa100075846 :wave:

Unfortunately this is the format that URLs have in the Angular Router with named outlets (in this case, the tabs). These URLs can’t be replaced, but you can add the paths you want to redirect to the outlet paths, like:

{
  path: 'home',
  redirectTo: '/tabs/(home:home)'
}

I know is not exactly want you want, but is the best alternative. You can learn more about redirects in the Angular Router docs.

Best,
Rodrigo


#3

Update: The Ionic team has been working on removing the requirement for named outlets in the tabs so cleaner URLs will be possible. Not available yet but may drop in the coming betas. You can see an example in action here: https://twitter.com/adamdbradley/status/1071163880838180866?s=21


#4

Hello Fdez Romero,

I truly thank you for taking the time that you did to give me answers. I tested your suggestion yesterday, and indeed, it did not give the desired result. I’m delighted to hear that the Ionic team is working on this topic and I look forward to testing the stable version 4 of Ionic.

Best regards