Ionic 3.5.0 strange URLs behavior "nav/n4" and "tabs/t0/page"

[tattivitorino]

Ionic version: (check one with "x")
[ ] 1.x (For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1)
[ ] 2.x
[x ] 3.x

I'm submitting a ... (check one with "x")
[x ] bug report
[ ] 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/

Current behavior:

Ionic 3.5.0 strange URLs behavior
My app has the basic interfaces! A LoginPage, SignupPage... that after login or signup it goes to the tabs interface.. nothing fancy i guess!
First of all the "nav/n4" is it default behavior?
http://localhost:8100/#/nav/n4/login
http://localhost:8100/#/nav/n4/app/tabs/t0/perfil/perfil

I created the pages and the Tabs with ionic g
and for all the pages I have the segment set for their, let's say, names like:
@IonicPage({ segment:'perfil' })

Expected behavior:

http://localhost:8100/#/login
http://localhost:8100/#/app/perfil

Steps to reproduce:

Related code:

login.module.ts

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';

import {SharedModule} from '../../shared/shared.module';

import { LoginPage } from './login';

@NgModule({
  declarations: [
    LoginPage,
  ],
  imports: [
    IonicPageModule.forChild(LoginPage),
    SharedModule
  ],
  exports: [
    LoginPage
  ]
})
export class LoginPageModule {}

login.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, MenuController, LoadingController, AlertController, Events } from 'ionic-angular';

import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { ControlValidator } from '../../validators/control-validator';

import { Config } from '../../config/config';

import { Storage } from '@ionic/storage';

import {UserProvider} from '../../providers/user/user.provider';
import {SocialProvider} from '../../providers/social/social.provider';

@IonicPage({
	segment:'login'
})
@Component({
  selector: 'page-login',
  templateUrl: 'login.html',
})
export class LoginPage {

	user:any = {};
	form:FormGroup;
	submitted:boolean = false;

	private loader:any;
 	private alert:any;

  constructor(
  	public navCtrl: NavController,
  	public menuCtrl:MenuController,
        public loaderCtrl:LoadingController,
    public alertCtrl:AlertController,
    public events:Events,
    public formBuilder:FormBuilder,
    public storage:Storage,
    public userService:UserProvider,
    public socialService:SocialProvider,
    public config:Config) {

  	this.user = {
      email:'',
      password:''
    }

    this.form = formBuilder.group({
      email:[this.user.email, Validators.compose([ControlValidator.isEmailValid])],
      password:[this.user.password, Validators.compose([Validators.required, Validators.minLength(5)])]
    });
  }

  ionViewDidLoad() {
    this.menuCtrl.enable(false);
  }

  showLoading(){
    this.loader = this.loaderCtrl.create({
      content: 'Verificando as suas credenciais...'
    });
    this.loader.present();
  }

  showAlert(subtitle:string){
    this.alert = this.alertCtrl.create({
      title: 'LOGIN',
      subTitle:subtitle,
      buttons:['OK'],
      cssClass:'alert-login'
    });
    this.alert.present();
  }

  openPage(page:string){
    this.navCtrl.push(page);
  }

  private onError(err:string){
  	this.showAlert(err);
  }

  login(){
    this.submitted = true;
    if(!this.form.valid){
      return;
    }
    this.showLoading();
    this.user = this.form.value;
    this.userService.login(this.user)
    .then(res=>{
    	if(res) {
    		this.loader.dismiss()
	        .then(()=>{
	          setTimeout(()=>{
	            this.navCtrl.setRoot('TabsPage');
          		});
          	});    		
    	}else{

    	}
    })
    .catch(this.onError);    
  }
}

tabs.module.ts

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { TabsPage } from './tabs';

@NgModule({
  declarations: [
    TabsPage
  ],
  imports: [
    IonicPageModule.forChild(TabsPage),
  ]
})
export class TabsPageModule {}

tabs.ts

import { Component } from '@angular/core';
import { IonicPage, NavController } from 'ionic-angular';

@Component({
  selector: 'page-tabs',
  templateUrl: 'tabs.html'
})
@IonicPage({
	segment:'app'
})
export class TabsPage {

  perfilRoot = 'PerfilPage';
  agendaRoot = 'AgendaPage';
  newsRoot = 'NewsPage';
  ticketsRoot = 'TicketsPage';
  myFestivalRoot = 'MyFestivalPage';

  constructor(public navCtrl: NavController) {}

}

perfil.module.ts

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { PerfilPage } from './perfil';

@NgModule({
  declarations: [
    PerfilPage,
  ],
  imports: [
    IonicPageModule.forChild(PerfilPage),
  ],
  exports: [
    PerfilPage
  ]
})
export class PerfilPageModule {}

perfil.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

@IonicPage({
	segment:'perfil'
})
@Component({
  selector: 'page-perfil',
  templateUrl: 'perfil.html',
})
export class PerfilPage {

  constructor(public navCtrl: NavController, public navParams: NavParams) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad PerfilPage');
  }

}

Other information:

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

global packages:

    @ionic/cli-utils : 1.4.0
    Ionic CLI        : 3.4.0

local packages:

    @ionic/app-scripts              : 1.3.12
    @ionic/cli-plugin-ionic-angular : 1.3.2
    Ionic Framework                 : ionic-angular 3.5.0

System:

    Node       : v6.5.0
    OS         : OS X El Capitan
    Xcode      : Xcode 8.1 Build version 8B62 
    ios-deploy : 1.9.1 
    ios-sim    : 5.0.13 
    npm        : 3.10.3 

[AmitMY]

The team is aware of this.
Last I checked, this was on lower priority than other stuff.
I hope this will be addressed soon as well.

[tattivitorino]

@AmitMY thanks for the reply!!
yup I hope that too!! deeplinking will be a problem with this behavior don't you think?
Is there any workaround that you know of?

[AmitMY]

I do think it is problematic, and I do not know if any workaround exists

[danbucholtz]

I am going to start working on this today.

Thanks,
Dan

[tattivitorino]

thank you so much @danbucholtz
cheers

[rashnk]

@tattivitorino thank u, u have asked this already, i just posted same on forum https://forum.ionicframework.com/t/url-not-reset-on-ionic-serve-live-reload/98080

[vellengs]

Any process for this?

[rashnk]

It is fixed in latest upgrade,

[vellengs]

@rashnk
I did upgrade "npm install ionic-angular@3.5.3 --save --save-exact";
It's still "http://localhost:8100/#/nav/n4/start";

[rashnk]

follow this http://blog.ionic.io/announcing-ionic-3-5-2/

[dev-manager-uk]

We have been having the same problem with /nav/n4/

rashnk - are you saying this is definitely fixed in 3.5.2?

It wasn't directly addressed on the blog post at: http://blog.ionic.io/announcing-ionic-3-5-2/

Is there a changelog of fixes we can check for this sort of thing in the future?

Thanks :)

[Sampath-Lokuge]

@dev-manager-uk Yes.See this: https://github.com/ionic-team/ionic/releases

[dev-manager-uk]

Awesome, thank you.

Is there anything we need to change in settings or code? Or it should Just Work™.

:D

[pklime2]

The issue is still present in both 3.5.2 and 3.5.3 for me.

ionic info

global packages:

@ionic/cli-utils : 1.5.0
Ionic CLI        : 3.5.0

local packages:

@ionic/app-scripts              : 2.0.2
@ionic/cli-plugin-ionic-angular : 1.3.2
Ionic Framework                 : ionic-angular 3.5.3

System:

Node       : v8.0.0
OS         : macOS Sierra
Xcode      : Xcode 8.3.3 Build version 8E3004b 
ios-deploy : 1.9.0 
ios-sim    : 5.0.9 
npm        : 5.3.0 

[vellengs]

@rashnk, I success upgraded. but the issue still remain, even create a new project for lazy load page using last version;

[rashnk]

Yes. i was wrong. the URL still have extra contents , but i were working on chrome with ionic serve -l
it does not seem to be a problem, check the screenshots

[vellengs]

Yes, the issue is url not expected.

Expected behavior:
http://localhost:8100/#/login
http://localhost:8100/#/app/perfil

[Sampath-Lokuge]

@danbucholtz We're waiting for your reply hence me too have same URL pattern as above with the latest Ionic 3.5.3

[agasbzj]

Same problem here. After upgrading to 3.5, my app using deeplinking (a browser app hosted on a server) didn't work as expected any more because of the magic urls like 'nav/n4'.
It looks like ionic3.5 changed the nav pattern, but I hope there will be a detailed documentation soon.
Anyway, thanks for ionic-team's hard work.

[Danielv3]

Same issue here. We are working on a PWA app and deeplinking is very important.

[larpo1]

Same here. This is holding up a release for us.

[AmitMY]

@larpo1 I suggest you downgrade if you can, there were not many changes other than nav in 3.5.X

[jgw96]

Hello all! Dan is currently working on shortening our URL's and getting rid of alot of the "magic" in them. We hope to have this ready soon.

[dev-manager-uk]

Thanks Dan! Thanks Justin!
They basically need to just work like web URLs

They should work like:
https://www.test.com/about

Instead of:
https://www.test.com/#/nav/n4/about
or even:
https://www.test.com/#/about

[Natanael1234]

Same here.

[danbucholtz]

This will be published tomorrow. The commits are already on Github so I'm going to close this.

Thanks,
Dan

[kirillgroshkov]

Yes, would be nice to have a fix

[AmitMY]

I am not sure if this does not have issues, but you folks should use the nightly, 3.5.3-201707251952, which has this fix. And if there are problems with it, please post an issue before release of 3.6

[reggaedit]

Can confirm $ npm install ionic-angular@3.5.3-201707251952 --save --save-exact works for me. Thanks!

Edit: use 3.6.0

[danbucholtz]

Sorry, we had an unforeseen issue and will ship tomorrow. If you want early access, check out npm install ionic-angular@nightly. If you're using tabs and seeing things break on a refresh, this is a known limitation of our system that will be fixed in Ionic 4 with a slight API change. In the meantime, you can use tabUrlPath on the ion-tab to mitigate it. Basically, if you have a deeplink segment and a tab with the same name/title, there could potentially be a collusion here. Other than that, everything is working awesomely so far.

Thanks,
Dan

[glebinsky]

@sergiocarneiro Unfortunately, adding that setting will not remove nav/n4 nor will you be able to got to that url directly.

[numerized]

Can confirm $ npm install ionic-angular@3.5.3-201707251952 --save --save-exact works for me. Thanks!

[AmitMY]

@numerized You can use 3.6.0 instead.

[summerchill]

Hi,
I'm on ionic cli v3.9.2 and I still have nav/n4 in the url bar.
Actually I even have
/#/nav/n4/pu/loginpage/nav/n5/pr/privatepage
As I have a public and a private nav...

I'm past 3.6.0 so not sure what the issue is, except it's causing massive issues

[AmitMY]

You need to use 3.6.0 ionic angular.

[summerchill]

Thanks AmitMY, unfortunately it doesn't fix it for me...

[summerchill]

What else could I do?

[Ludval]

Same thing here, i'm on ionic@3.10.1 and always the same problem !!!

[AmitMY]

Other than upgrading ionic and ionic-angular to latest, @danbucholtz is there something else to be done?
For me it works using latest

[tskweres]

So if I run ionc-angular 3.6.1 and do:

@NgModule({
  imports: [
      BrowserModule,
       IonicModule.forRoot(AppComponent, {
          locationStrategy: "path", // <--- here
      }),
      ...
  ]
})

It works for me

[tattivitorino]

Hello you all! it seems a lot happened and changed since i created this issue! I can see that part of the url problems we had before are fixed! For the pages that are not inside a tab system everything works fine! but its not the case with the tabs.

I just created a fresh app with a couple of pages like login, signup etc.. and the url is perfect for those!
http://localhost:8100/#/login
http://localhost:8100/#/signup

When I get to the tabs page (upon login) thats what i have:

http://localhost:8100/#/tabs/tab1/tab1
here i didnt setup the segment on the IonicPage nor the tabUrlPath on the ion-tab

http://localhost:8100/#/tabs/tab-1/tab1
here i setup the tabUrlPath on the ion-tab (<ion-tab [root]="tab1Root" tabTitle="Tab1" tabIcon="information-circle" tabUrlPath="tab-1">)

http://localhost:8100/#/tabs/tab-1/tab-1
here i setup both
@IonicPage({
segment:'tab-1'
})
<ion-tab [root]="tab1Root" tabTitle="Tab1" tabIcon="information-circle" tabUrlPath="tab-1">

it looks to me like the tabUrlPath is related to the first /tab-1 segment and the IonicPage segment is the 2nd segment!

Is there a way to get rid of either of them? I dont see the point of having both segments! The ideal would be: http://localhost:8100/#/tabs/tab-1, right?

thats my system info:

`
cli packages: (/ionicv2/appv3/app/node_modules)

@ionic/cli-utils  : 1.12.0
ionic (Ionic CLI) : 3.12.0

global packages:

cordova (Cordova CLI) : 7.0.1 

local packages:

@ionic/app-scripts : 2.1.4
Cordova Platforms  : none
Ionic Framework    : ionic-angular 3.6.1

System:

Android SDK Tools : 25.2.5
ios-deploy        : 1.9.1 
ios-sim           : 5.0.13 
Node              : v6.5.0
npm               : 3.10.3 
OS                : OS X El Capitan
Xcode             : Xcode 8.1 Build version 8B62 

`

[lostdev]

Definitely an issue for me as well with Ionic 3.9.2. I am also using tabs like the others. I'll provide more info if necessary.

I get a url that looks like the following: http://localhost:8100/create/nav/n9/create.

[felschr]

I'm completely agreeing with @tattivitorino that there isn't really a need to have the tab name and page name in the URL. Imo the tab names should be completely replaced by the page name.

Another thing I noticed is that I cannot get URLs with parameters working when using tabs.
This doesn't work:
http://127.0.0.1:8100/#/tabs/docs/documents/063b38ae-8edd-408b-b7fc-a346b1c16a8b
While this does:
http://127.0.0.1:8100/#/documents/063b38ae-8edd-408b-b7fc-a346b1c16a8b

The page I want to get has the following segment definition:
segment: "documents/:documentId"

[reggaedit]

Just did an upgrade since my previous comment, using 3.9.2 and it is showing /nav/n4/ . Any updates to having this removed or should I downgrade to 3.6.0?

EDIT: Ignore this, looks like it was more of a problem with my package-lock.json in npm, forcing the install from my package.json with npm install --no-shrinkwrap seemed to do the trick and properly install 3.9.2

[AlexanderBrese]

I'm running 3.9.2. Issue persists.

[TGibsonn]

Having this issue as well on 3.9.2.

e.g.: /nav/n5/MasterLogin

[mariohmol]

I had this working normal and then started to make the /nav/ path.. using 3.9.2 as well!

I found out that the problem was because i was having more than one/switch ion-nav in main page (was trying to show a ion-split-pane or without)

[TGibsonn]

@mariohmol That resolved the issue for me. Thanks for including that.

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