Ionic-framework: Ionic 3.5.0 comportamiento extraño de URLs "nav / n4" y "tabs / t0 / page"
Versión iónica: (marque una con "x")
[] 1.x (Para problemas de Ionic 1.x, utilice https://github.com/ionic-team/ionic-v1)
[] 2.x
[x] 3.x
Estoy enviando un ... (marque uno con "x")
[x] informe de errores
[ ] solicitud de función
[] solicitud de soporte => No envíe solicitudes de soporte aquí, use uno de estos canales: https://forum.ionicframework.com/ o http://ionicworldwide.herokuapp.com/
Comportamiento actual:
Comportamiento extraño de las URL de Ionic 3.5.0
¡Mi aplicación tiene las interfaces básicas! Una LoginPage, SignupPage ... que después de iniciar sesión o registrarse va a la interfaz de pestañas ... ¡supongo que nada lujoso!
En primer lugar, el "nav / n4" ¿es el comportamiento predeterminado?
http: // localhost : 8100 / # / nav / n4 / login
http: // localhost : 8100 / # / nav / n4 / app / tabs / t0 / perfil / perfil
Creé las páginas y las pestañas con ionic g
y para todas las páginas tengo el segmento configurado para sus, digamos, nombres como:
@IonicPage ({segmento: 'perfil'})
Comportamiento esperado:
http: // localhost : 8100 / # / login
http: // localhost : 8100 / # / app / perfil
Pasos para reproducir:
Código relacionado:
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');
}
}
Otra información:
Información iónica: (ejecute ionic info desde un indicador de terminal / cmd y pegue el resultado a continuación):
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
Todos 53 comentarios
El equipo es consciente de esto.
La última vez que verifiqué, esto tenía una prioridad más baja que otras cosas.
Espero que esto también se solucione pronto.
AmitMY
en 13 jul. 2017
@AmitMY gracias por la respuesta !!
sí, espero eso también !! los enlaces profundos serán un problema con este comportamiento, ¿no crees?
¿Existe alguna solución alternativa que conozca?
tattivitorino
en 13 jul. 2017
Creo que es problemático y no sé si existe alguna solución.
AmitMY
en 13 jul. 2017
Voy a empezar a trabajar en esto hoy.
Gracias,
Dan
danbucholtz
en 13 jul. 2017
muchas gracias @danbucholtz
salud
tattivitorino
en 13 jul. 2017
@tattivitorino gracias, ya has preguntado esto, acabo de publicar lo mismo en el foro https://forum.ionicframework.com/t/url-not-reset-on-ionic-serve-live-reload/98080
rashnk
en 13 jul. 2017
¿Algún proceso para esto?
vellengs
en 16 jul. 2017
Se corrigió en la última actualización,
rashnk
en 16 jul. 2017
@rashnk
Actualicé "npm install [email protected] --save --save-exact";
Sigue siendo " http: // localhost : 8100 / # / nav / n4 / start";
vellengs
en 16 jul. 2017
rashnk
en 16 jul. 2017
Hemos tenido el mismo problema con / nav / n4 /
rashnk: ¿estás diciendo que esto definitivamente está arreglado en 3.5.2?
No se abordó directamente en la publicación del blog en: http://blog.ionic.io/announcing-ionic-3-5-2/
¿Existe un registro de cambios de correcciones que podamos verificar para este tipo de cosas en el futuro?
Gracias :)
dev-manager-uk
en 16 jul. 2017
@ dev-manager-uk Sí, vea esto: https://github.com/ionic-team/ionic/releases
Sampath-Lokuge
en 16 jul. 2017
Increíble gracias.
¿Hay algo que debamos cambiar en la configuración o el código? O debería Just Work ™.
:D
dev-manager-uk
en 16 jul. 2017
El problema todavía está presente en 3.5.2 y 3.5.3 para mí.
información iónica
paquetes globales:
@ionic/cli-utils : 1.5.0
Ionic CLI : 3.5.0
paquetes locales:
@ionic/app-scripts : 2.0.2
@ionic/cli-plugin-ionic-angular : 1.3.2
Ionic Framework : ionic-angular 3.5.3
Sistema:
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
en 16 jul. 2017
@rashnk , actualicé con éxito. pero el problema persiste, incluso cree un nuevo proyecto para la página de carga diferida usando la última versión;
vellengs
en 17 jul. 2017
Si. Me equivoqué. la URL todavía tiene contenido adicional, pero estaba trabajando en Chrome con servicio iónico -l
no parece ser un problema, revisa las capturas de pantalla
rashnk
en 17 jul. 2017
Sí, no se esperaba el problema con la URL.
Comportamiento esperado:
http: // localhost : 8100 / # / login
http: // localhost : 8100 / # / app / perfil
vellengs
en 17 jul. 2017
@danbucholtz Estamos esperando su respuesta, por lo tanto, yo también tengo el mismo patrón de URL que el anterior con el último Ionic 3.5.3
Sampath-Lokuge
en 17 jul. 2017
El mismo problema aqui. Después de actualizar a 3.5, mi aplicación que usaba enlaces profundos (una aplicación de navegador alojada en un servidor) ya no funcionaba como se esperaba debido a las URL mágicas como 'nav / n4'.
Parece que ionic3.5 cambió el patrón de navegación, pero espero que pronto haya una documentación detallada.
De todos modos, gracias por el arduo trabajo del equipo iónico.
agasbzj
en 18 jul. 2017
El mismo problema aquí. Estamos trabajando en una aplicación de PWA y la creación de enlaces profundos es muy importante.
Danielv3
en 18 jul. 2017
Aquí igual. Esto nos está retrasando.
larpo1
en 18 jul. 2017
@ larpo1 Te sugiero que
AmitMY
en 18 jul. 2017
¡Hola a todos! Dan está trabajando actualmente para acortar nuestras URL y deshacerse de mucha "magia" en ellas. Esperamos tener esto listo pronto.
jgw96
en 18 jul. 2017
¡Gracias Dan! ¡Gracias Justin!
Básicamente, necesitan funcionar como URL web.
Deberían funcionar como:
https://www.test.com/about
En lugar de:
https://www.test.com/#/nav/n4/about
o incluso:
https://www.test.com/#/about
dev-manager-uk
en 18 jul. 2017
Aquí igual.
Natanael1234
en 21 jul. 2017
@ dev-manager-uk Con respecto a https://www.test.com/#/about, ese es otro tema.
Lo eliminas cambiando locationStrategy en el módulo de la aplicación:
@NgModule({
imports: [
BrowserModule,
IonicModule.forRoot(AppComponent, {
locationStrategy: "path", // <--- here
}),
...
]
})
sergiocarneiro
en 24 jul. 2017
Gracias @sergiocarneiro
¡Lo intentaré!
dev-manager-uk
en 25 jul. 2017
Hola @ jgw96
¿Tiene una eta aproximada para una versión para corregir los enlaces profundos?
Gracias :-)
dev-manager-uk
en 25 jul. 2017
Tuve que hacer una rebaja para camuflar este problema:
"npm install [email protected] --save --save-exact"
NiltonMorais
en 26 jul. 2017
Esto se publicará mañana. Las confirmaciones ya están en Github, así que cerraré esto.
Gracias,
Dan
danbucholtz
en 26 jul. 2017
Sí, sería bueno tener una solución
kirillgroshkov
en 26 jul. 2017
No estoy seguro si esto no tiene problemas, pero ustedes deberían usar el 3.5.3-201707251952 nocturno, que tiene esta solución. Y si hay problemas con él, publique un problema antes del lanzamiento de 3.6
AmitMY
en 26 jul. 2017
Puedo confirmar que $ npm install [email protected] --save --save-exact funciona para mí. ¡Gracias!
Editar: use 3.6.0
reggaedit
en 26 jul. 2017
Lo sentimos, tuvimos un problema imprevisto y lo enviaremos mañana. Si desea acceso anticipado, consulte npm install ionic-angular@nightly . Si estás usando pestañas y ves que las cosas se rompen en una actualización, esta es una limitación conocida de nuestro sistema que se solucionará en Ionic 4 con un ligero cambio en la API. Mientras tanto, puede usar tabUrlPath en ion-tab para mitigarlo. Básicamente, si tiene un enlace profundo segment y un tab con el mismo name/title , podría haber una colusión aquí. Aparte de eso, todo está funcionando de maravilla hasta ahora.
Gracias,
Dan
danbucholtz
en 26 jul. 2017
@sergiocarneiro Desafortunadamente, agregar esa configuración no eliminará nav/n4 ni podrá acceder a esa URL directamente.
glebinsky
en 8 ago. 2017
Puedo confirmar $ npm install [email protected] --save --save-exact funciona para mí. ¡Gracias!
numerized
en 9 ago. 2017
@numerized Puede utilizar 3.6.0 en su lugar.
AmitMY
en 9 ago. 2017
Hola,
Estoy en ionic cli v3.9.2 y todavía tengo nav / n4 en la barra de direcciones.
De hecho, incluso tengo
/ # / nav / n4 / pu / loginpage / nav / n5 / pr / privatepage
Como tengo un navegador público y uno privado ...
Ya pasé la 3.6.0, así que no estoy seguro de cuál es el problema, excepto que está causando problemas masivos.
summerchill
en 12 sept. 2017
Necesita usar 3.6.0 angular iónico.
AmitMY
en 12 sept. 2017
Gracias AmitMY, lamentablemente no me lo arregla ...
summerchill
en 12 sept. 2017
¿Qué más podía hacer?
summerchill
en 12 sept. 2017
Lo mismo aquí, estoy en [email protected] y siempre el mismo problema !!!
lud42
en 15 sept. 2017
Además de actualizar iónico y iónico-angular a la última versión , ¿ hay algo más que hacer?
Para mí funciona con la última
AmitMY
en 15 sept. 2017
Entonces, si ejecuto ionc-angular 3.6.1 y hago:
@NgModule({
imports: [
BrowserModule,
IonicModule.forRoot(AppComponent, {
locationStrategy: "path", // <--- here
}),
...
]
})
Esto funciona para mi
tskweres
en 18 sept. 2017
Hola a todos! ¡Parece que han pasado muchas cosas y han cambiado desde que creé este problema! Puedo ver que parte de los problemas de URL que teníamos antes se han solucionado. Para las páginas que no están dentro de un sistema de pestañas, ¡todo funciona bien! pero no es el caso de las pestañas.
Acabo de crear una nueva aplicación con un par de páginas como inicio de sesión, registro, etc. ¡y la URL es perfecta para ellos!
http: // localhost : 8100 / # / login
http: // localhost : 8100 / # / signup
Cuando llego a la página de pestañas (al iniciar sesión), eso es lo que tengo:
http: // localhost : 8100 / # / tabs / tab1 / tab1
aquí no configuré el segmento en IonicPage ni la tabUrlPath en la pestaña de iones
http: // localhost : 8100 / # / tabs / tab-1 / tab1
aquí configuro tabUrlPath en la pestaña de iones (
http: // localhost : 8100 / # / tabs / tab-1 / tab-1
aquí configuro ambos
@IonicPage ({
segmento: 'tab-1'
})
¡Me parece que tabUrlPath está relacionado con el primer segmento / tab-1 y el segmento IonicPage es el segundo segmento!
¿Hay alguna forma de deshacerse de alguno de ellos? ¡No veo el sentido de tener ambos segmentos! Lo ideal sería: http: // localhost : 8100 / # / tabs / tab-1, ¿verdad?
esa es la información de mi sistema:
'
paquetes cli: (/ ionicv2 / appv3 / app / node_modules)
@ionic/cli-utils : 1.12.0
ionic (Ionic CLI) : 3.12.0
paquetes globales:
cordova (Cordova CLI) : 7.0.1
paquetes locales:
@ionic/app-scripts : 2.1.4
Cordova Platforms : none
Ionic Framework : ionic-angular 3.6.1
Sistema:
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
en 25 sept. 2017
Definitivamente un problema para mí también con Ionic 3.9.2. También estoy usando pestañas como las demás. Proporcionaré más información si es necesario.
Recibo una URL similar a la siguiente: http://localhost:8100/create/nav/n9/create .
lostdev
en 26 sept. 2017
Estoy completamente de acuerdo con @tattivitorino en que realmente no es necesario tener el nombre de la pestaña y el nombre de la página en la URL. Imo, los nombres de las pestañas deben reemplazarse completamente por el nombre de la página.
Otra cosa que noté es que no puedo obtener URL con parámetros que funcionen cuando uso pestañas.
Esto no funciona:
http://127.0.0.1 : 8100 / # / tabs / docs / documents / 063b38ae-8edd-408b-b7fc-a346b1c16a8b
Mientras esto lo hace:
http://127.0.0.1 : 8100 / # / documents / 063b38ae-8edd-408b-b7fc-a346b1c16a8b
La página que quiero obtener tiene la siguiente definición de segmento:
segment: "documents/:documentId"
felschr
en 9 oct. 2017
Acabo de hacer una actualización desde mi comentario anterior, usando 3.9.2 y muestra / nav / n4 /. ¿Alguna actualización para eliminar esto o debería cambiar a 3.6.0?
EDITAR: Ignore esto, parece que fue más un problema con mi package-lock.json en npm, forzando la instalación desde mi package.json con npm install --no-shrinkwrap pareció hacer el truco e instalar correctamente 3.9.2
reggaedit
en 22 ene. 2018
Estoy ejecutando 3.9.2. El problema persiste.
AlexanderBrese
en 21 feb. 2018
Tener este problema también en 3.9.2.
por ejemplo: / nav / n5 / MasterLogin
TGibsonn
en 31 may. 2018
Tuve esto funcionando normalmente y luego comencé a hacer el / nav / path ... ¡usando 3.9.2 también!
Descubrí que el problema era porque tenía más de uno / cambiar ion-nav en la página principal (estaba tratando de mostrar un panel dividido de iones o sin él)
mariohmol
en 10 jun. 2018
@mariohmol Eso me resolvió el problema. Gracias por incluir eso.
TGibsonn
en 11 jun. 2018
¡Gracias por el problema! Este problema está bloqueado para evitar comentarios que no sean relevantes para el problema original. Si esto sigue siendo un problema con la última versión de Ionic, cree un nuevo problema y asegúrese de que la plantilla esté completa.
![ionitron-bot[bot] picture](https://avatars1.githubusercontent.com/in/8640?v=4&s=40)
ionitron-bot[bot]
en 1 sept. 2018
Temas relacionados
alan-agius4
·
3Comentarios
brandyscarney
·
3Comentarios
MrBokeh
·
3Comentarios
SebastianGiro
·
3Comentarios
vswarte
·
3Comentarios
Comentario más útil
Voy a empezar a trabajar en esto hoy.
Gracias,
Dan