Ionic-framework: Ionic 3.5.0 strange URLs behavior "nav/n4" and "tabs/t0/page"
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
tattivitorino
All 53 comments
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.
AmitMY
on 13 Jul 2017
@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?
tattivitorino
on 13 Jul 2017
I do think it is problematic, and I do not know if any workaround exists
AmitMY
on 13 Jul 2017
I am going to start working on this today.
Thanks,
Dan
danbucholtz
on 13 Jul 2017
thank you so much @danbucholtz
cheers
tattivitorino
on 13 Jul 2017
@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
rashnk
on 13 Jul 2017
Any process for this?
vellengs
on 16 Jul 2017
It is fixed in latest upgrade,
rashnk
on 16 Jul 2017
@rashnk
I did upgrade "npm install [email protected] --save --save-exact";
It's still "http://localhost:8100/#/nav/n4/start";
vellengs
on 16 Jul 2017
follow this http://blog.ionic.io/announcing-ionic-3-5-2/
rashnk
on 16 Jul 2017
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 :)
dev-manager-uk
on 16 Jul 2017
@dev-manager-uk Yes.See this: https://github.com/ionic-team/ionic/releases
Sampath-Lokuge
on 16 Jul 2017
Awesome, thank you.
Is there anything we need to change in settings or code? Or it should Just Work™.
:D
dev-manager-uk
on 16 Jul 2017
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
pklime2
on 16 Jul 2017
@rashnk, I success upgraded. but the issue still remain, even create a new project for lazy load page using last version;
vellengs
on 17 Jul 2017
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
rashnk
on 17 Jul 2017
Yes, the issue is url not expected.
Expected behavior:
http://localhost:8100/#/login
http://localhost:8100/#/app/perfil
vellengs
on 17 Jul 2017
@danbucholtz We're waiting for your reply hence me too have same URL pattern as above with the latest Ionic 3.5.3
Sampath-Lokuge
on 17 Jul 2017
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.
agasbzj
on 18 Jul 2017
Same issue here. We are working on a PWA app and deeplinking is very important.
Danielv3
on 18 Jul 2017
Same here. This is holding up a release for us.
larpo1
on 18 Jul 2017
@larpo1 I suggest you downgrade if you can, there were not many changes other than nav in 3.5.X
AmitMY
on 18 Jul 2017
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.
jgw96
on 18 Jul 2017
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
dev-manager-uk
on 18 Jul 2017
Same here.
Natanael1234
on 21 Jul 2017
@dev-manager-uk Regarding the https://www.test.com/#/about that's another subject.
You remove it by changing the locationStrategy in the app's module:
@NgModule({
imports: [
BrowserModule,
IonicModule.forRoot(AppComponent, {
locationStrategy: "path", // <--- here
}),
...
]
})
sergiocarneiro
on 24 Jul 2017
Thank you @sergiocarneiro
I'll give that a try!
dev-manager-uk
on 25 Jul 2017
Hi there @jgw96
Do you have an approx eta for a release to fix deeplinking?
Thanks :-)
dev-manager-uk
on 25 Jul 2017
I had to make a downgrade to camouflage this problem:
"npm install [email protected] --save --save-exact"
NiltonMorais
on 26 Jul 2017
This will be published tomorrow. The commits are already on Github so I'm going to close this.
Thanks,
Dan
danbucholtz
on 26 Jul 2017
Yes, would be nice to have a fix
kirillgroshkov
on 26 Jul 2017
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
AmitMY
on 26 Jul 2017
Can confirm $ npm install [email protected] --save --save-exact works for me. Thanks!
Edit: use 3.6.0
reggaedit
on 26 Jul 2017
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
danbucholtz
on 26 Jul 2017
@sergiocarneiro Unfortunately, adding that setting will not remove nav/n4 nor will you be able to got to that url directly.
glebinsky
on 8 Aug 2017
Can confirm $ npm install [email protected] --save --save-exact works for me. Thanks!
numerized
on 9 Aug 2017
@numerized You can use 3.6.0 instead.
AmitMY
on 9 Aug 2017
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
summerchill
on 12 Sep 2017
You need to use 3.6.0 ionic angular.
AmitMY
on 12 Sep 2017
Thanks AmitMY, unfortunately it doesn't fix it for me...
summerchill
on 12 Sep 2017
What else could I do?
summerchill
on 12 Sep 2017
Same thing here, i'm on [email protected] and always the same problem !!!
lud42
on 15 Sep 2017
Other than upgrading ionic and ionic-angular to latest, @danbucholtz is there something else to be done?
For me it works using latest
AmitMY
on 15 Sep 2017
So if I run ionc-angular 3.6.1 and do:
@NgModule({
imports: [
BrowserModule,
IonicModule.forRoot(AppComponent, {
locationStrategy: "path", // <--- here
}),
...
]
})
It works for me
tskweres
on 18 Sep 2017
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 (
http://localhost:8100/#/tabs/tab-1/tab-1
here i setup both
@IonicPage({
segment:'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
`
tattivitorino
on 25 Sep 2017
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.
lostdev
on 26 Sep 2017
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"
felschr
on 9 Oct 2017
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
reggaedit
on 22 Jan 2018
I'm running 3.9.2. Issue persists.
AlexanderBrese
on 21 Feb 2018
Having this issue as well on 3.9.2.
e.g.: /nav/n5/MasterLogin
TGibsonn
on 31 May 2018
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)
mariohmol
on 10 Jun 2018
@mariohmol That resolved the issue for me. Thanks for including that.
TGibsonn
on 11 Jun 2018
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.
![ionitron-bot[bot] picture](https://avatars1.githubusercontent.com/in/8640?v=4&s=40)
ionitron-bot[bot]
on 1 Sep 2018
Related issues
manucorporat
·
3Comments
RobFerguson
·
3Comments
brandyscarney
·
3Comments
aslamj
·
3Comments
giammaleoni
·
3Comments
Most helpful comment
I am going to start working on this today.
Thanks,
Dan