Ionic-framework: Ionic 3.5.0 seltsames URL-Verhalten "nav/n4" und "tabs/t0/page"
Ionische Version: (eine mit "x" ankreuzen)
[ ] 1.x (Für Ionic 1.x-Probleme verwenden Sie bitte https://github.com/ionic-team/ionic-v1)
[ ] 2.x
[x] 3.x
Ich sende ein ... (eins mit "x" ankreuzen)
[x] Fehlerbericht
[ ] Featureanfrage
[ ] Supportanfrage => Bitte stellen Sie hier keine Supportanfragen, verwenden Sie einen dieser Kanäle: https://forum.ionicframework.com/ oder http://ionicworldwide.herokuapp.com/
Aktuelles Verhalten:
Ionic 3.5.0 seltsames URL-Verhalten
Meine App hat die grundlegenden Schnittstellen! Eine LoginPage, SignupPage... die nach der Anmeldung oder Anmeldung zum Tabs-Interface geht... nichts Besonderes, denke ich!
Zuallererst das "nav/n4" ist das Standardverhalten?
http://localhost :8100/#/nav/n4/login
http://localhost :8100/#/nav/n4/app/tabs/t0/perfil/perfil
Ich habe die Seiten und die Tabs mit ionic g . erstellt
und für alle Seiten habe ich das Segment für ihre, sagen wir, Namen wie:
@IonicPage({ segment:'perfil'})
Erwartetes Verhalten:
http://localhost :8100/#/login
http://localhost :8100/#/app/perfil
Schritte zum Reproduzieren:
Zugehöriger 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');
}
}
Andere Informationen:
Ionic info: (führen Sie ionic info von einer Terminal-/cmd-Eingabeaufforderung aus und fügen Sie die Ausgabe unten ein):
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
Alle 53 Kommentare
Dessen ist sich das Team bewusst.
Als ich das letzte Mal nachgesehen habe, hatte dies eine niedrigere Priorität als andere Dinge.
Ich hoffe, dass dies auch bald behoben wird.
AmitMY
am 13. Juli 2017
@AmitMY danke für die Antwort!!
jup das hoffe ich auch!! Deeplinking wird ein Problem mit diesem Verhalten sein, meinst du nicht?
Gibt es einen Workaround, den Sie kennen?
tattivitorino
am 13. Juli 2017
Ich denke, es ist problematisch, und ich weiß nicht, ob es einen Workaround gibt
AmitMY
am 13. Juli 2017
Ich werde heute damit beginnen, daran zu arbeiten.
Vielen Dank,
Dan
danbucholtz
am 13. Juli 2017
vielen Dank @danbucholtz
Danke schön
tattivitorino
am 13. Juli 2017
@tativitorino danke, du hast das schon gefragt, ich habe gerade dasselbe im Forum gepostet https://forum.ionicframework.com/t/url-not-reset-on-ionic-serve-live-reload/98080
rashnk
am 13. Juli 2017
Irgendein Prozess dafür?
vellengs
am 16. Juli 2017
Es ist im neuesten Upgrade behoben,
rashnk
am 16. Juli 2017
@rashnk
Ich habe "npm install [email protected] --save --save-exact" aktualisiert;
Es ist immer noch " http://localhost :8100/#/nav/n4/start";
vellengs
am 16. Juli 2017
Folgen Sie diesem http://blog.ionic.io/announcing-ionic-3-5-2/
rashnk
am 16. Juli 2017
Wir haben das gleiche Problem mit /nav/n4/
rashnk - meinst du damit, dass dies definitiv in 3.5.2 behoben ist?
Es wurde im Blogbeitrag unter http://blog.ionic.io/announcing-ionic-3-5-2/ nicht direkt angesprochen.
Gibt es ein Changelog mit Fixes, das wir in Zukunft auf solche Dinge überprüfen können?
Vielen Dank :)
dev-manager-uk
am 16. Juli 2017
@dev-manager-uk Ja. Sehen Sie dies: https://github.com/ionic-team/ionic/releases
Sampath-Lokuge
am 16. Juli 2017
Großartig, danke.
Gibt es etwas, das wir in den Einstellungen oder im Code ändern müssen? Oder es sollte Just Work™ sein.
:D
dev-manager-uk
am 16. Juli 2017
Das Problem ist für mich immer noch in 3.5.2 und 3.5.3 vorhanden.
Ioneninfo
globale Pakete:
@ionic/cli-utils : 1.5.0
Ionic CLI : 3.5.0
lokale Pakete:
@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
am 16. Juli 2017
@rashnk , ich habe erfolgreich aktualisiert. aber das Problem bleibt bestehen, erstellen Sie sogar ein neues Projekt für die Lazy-Load-Seite mit der letzten Version.
vellengs
am 17. Juli 2017
Jawohl. Ich lag falsch. die URL hat immer noch zusätzlichen Inhalt, aber ich habe mit ionic serve an Chrome gearbeitet -l
Es scheint kein Problem zu sein, überprüfen Sie die Screenshots
rashnk
am 17. Juli 2017
Ja, das Problem ist die URL, die nicht erwartet wird.
Erwartetes Verhalten:
http://localhost :8100/#/login
http://localhost :8100/#/app/perfil
vellengs
am 17. Juli 2017
@danbucholtz Wir warten auf Ihre Antwort, daher habe auch ich das gleiche URL-Muster wie oben mit dem neuesten Ionic 3.5.3
Sampath-Lokuge
am 17. Juli 2017
Selbes Problem hier. Nach dem Upgrade auf 3.5 funktionierte meine App mit Deeplinking (eine auf einem Server gehostete Browser-App) aufgrund der magischen URLs wie 'nav/n4' nicht mehr wie erwartet.
Es sieht so aus, als ob ionic3.5 das Navigationsmuster geändert hat, aber ich hoffe, dass es bald eine detaillierte Dokumentation geben wird.
Wie auch immer, danke für die harte Arbeit des ionic-teams.
agasbzj
am 18. Juli 2017
Gleiches Problem hier. Wir arbeiten an einer PWA-App und Deeplinking ist sehr wichtig.
Danielv3
am 18. Juli 2017
Hier gilt das gleiche. Dies hält eine Freigabe für uns auf.
larpo1
am 18. Juli 2017
@larpo1 Ich schlage vor, dass Sie ein Downgrade durchführen, wenn Sie können, es gab nicht viele Änderungen außer der Navigation in 3.5.X
AmitMY
am 18. Juli 2017
Hallo alle! Dan arbeitet derzeit daran, unsere URLs zu kürzen und viel von der "Magie" in ihnen loszuwerden. Wir hoffen, dies bald fertig zu haben.
jgw96
am 18. Juli 2017
Danke Dan! Danke Justin!
Sie müssen im Grunde wie Web-URLs funktionieren
Sie sollten wie folgt funktionieren:
https://www.test.com/about
Anstatt von:
https://www.test.com/#/nav/n4/about
oder auch:
https://www.test.com/#/about
dev-manager-uk
am 18. Juli 2017
Hier gilt das gleiche.
Natanael1234
am 21. Juli 2017
@dev-manager-uk In Bezug auf https://www.test.com/#/ ist das ein anderes Thema.
Sie entfernen es, indem Sie das locationStrategy im Modul der App ändern:
@NgModule({
imports: [
BrowserModule,
IonicModule.forRoot(AppComponent, {
locationStrategy: "path", // <--- here
}),
...
]
})
sergiocarneiro
am 24. Juli 2017
Danke @sergiocarneiro
Ich werde das versuchen!
dev-manager-uk
am 25. Juli 2017
Hallo @jgw96
Haben Sie eine ungefähre eta für eine Veröffentlichung zur Behebung von Deeplinking?
Vielen Dank :-)
dev-manager-uk
am 25. Juli 2017
Ich musste ein Downgrade vornehmen, um dieses Problem zu tarnen:
"npm install [email protected] --save --save-exact"
NiltonMorais
am 26. Juli 2017
Dieser wird morgen veröffentlicht. Die Commits sind bereits auf Github, daher werde ich dies schließen.
Vielen Dank,
Dan
danbucholtz
am 26. Juli 2017
Ja, wäre schön, wenn ich eine Lösung hätte
kirillgroshkov
am 26. Juli 2017
Ich bin mir nicht sicher, ob dies keine Probleme hat, aber Sie sollten das nächtliche 3.5.3-201707251952 , das diesen Fix enthält. Und wenn es Probleme damit gibt, poste bitte ein Problem vor der Veröffentlichung von 3.6
AmitMY
am 26. Juli 2017
Kann bestätigen, dass $ npm install [email protected] --save --save-exact bei mir funktioniert. Vielen Dank!
Bearbeiten: 3.6.0 verwenden
reggaedit
am 26. Juli 2017
Entschuldigung, wir hatten ein unvorhergesehenes Problem und werden morgen versenden. Wenn Sie einen frühen Zugriff wünschen, sehen Sie sich npm install ionic-angular@nightly . Wenn Sie Tabs verwenden und bei einer Aktualisierung Fehler sehen, ist dies eine bekannte Einschränkung unseres Systems, die in Ionic 4 mit einer leichten API-Änderung behoben wird. In der Zwischenzeit können Sie tabUrlPath auf dem ion-tab , um es zu mildern. Grundsätzlich, wenn Sie einen Deeplink segment und einen tab mit dem gleichen name/title , könnte es hier möglicherweise zu einer Absprache kommen. Ansonsten funktioniert bisher alles wunderbar.
Vielen Dank,
Dan
danbucholtz
am 26. Juli 2017
@sergiocarneiro Leider wird durch das Hinzufügen dieser Einstellung weder nav/n4 noch können Sie direkt zu dieser URL gelangen.
glebinsky
am 8. Aug. 2017
Kann bestätigen $ npm install [email protected] --save --save-exact funktioniert für mich. Vielen Dank!
numerized
am 9. Aug. 2017
@numerized Sie können stattdessen 3.6.0 verwenden.
AmitMY
am 9. Aug. 2017
Hi,
Ich verwende ionic cli v3.9.2 und habe immer noch nav / n4 in der URL-Leiste.
Eigentlich habe ich sogar
/#/nav/n4/pu/loginpage/nav/n5/pr/privatepage
Da ich ein öffentliches und ein privates Navi habe...
Ich bin über 3.6.0 hinaus, also bin ich mir nicht sicher, was das Problem ist, außer dass es massive Probleme verursacht
summerchill
am 12. Sept. 2017
Sie müssen 3.6.0 Ionenwinkel verwenden.
AmitMY
am 12. Sept. 2017
Danke AmitMY, leider behebt es das nicht für mich...
summerchill
am 12. Sept. 2017
Was könnte ich noch tun?
summerchill
am 12. Sept. 2017
Das gleiche hier, ich bin auf [email protected] und immer das gleiche Problem !!!
lud42
am 15. Sept. 2017
Gibt es außer dem Upgrade von ionisch und ionisch-winkelig auf die neueste
Bei mir funktioniert es mit den neuesten
AmitMY
am 15. Sept. 2017
Wenn ich also ionc-angular 3.6.1 ausführe und Folgendes tue:
@NgModule({
imports: [
BrowserModule,
IonicModule.forRoot(AppComponent, {
locationStrategy: "path", // <--- here
}),
...
]
})
Für mich geht das
tskweres
am 18. Sept. 2017
Hallo ihr alle! es scheint, dass viel passiert ist und sich geändert hat, seit ich dieses Problem erstellt habe! Ich kann sehen, dass ein Teil der URL-Probleme, die wir zuvor hatten, behoben ist! Für die Seiten, die sich nicht in einem Tab-System befinden, funktioniert alles einwandfrei! aber bei den Tabs ist das nicht der Fall.
Ich habe gerade eine neue App mit ein paar Seiten wie Login, Signup etc. erstellt und die URL ist perfekt dafür!
http://localhost :8100/#/login
http://localhost :8100/#/signup
Wenn ich auf die Tabs-Seite komme (beim Einloggen), habe ich das:
http://localhost :8100/#/tabs/tab1/tab1
hier habe ich weder das segment auf der IonicPage noch den tabUrlPath auf dem ion-tab eingerichtet
http://localhost :8100/#/tabs/tab-1/tab1
hier richte ich den tabUrlPath auf dem ion-tab ein (
http://localhost :8100/#/tabs/tab-1/tab-1
hier habe ich beides eingerichtet
@IonischeSeite({
Segment:'Tab-1'
})
es sieht für mich so aus, als ob der tabUrlPath mit dem ersten /tab-1-Segment zusammenhängt und das IonicPage-Segment das zweite Segment ist!
Gibt es eine Möglichkeit, beides loszuwerden? Ich sehe keinen Sinn darin, beide Segmente zu haben! Das Ideal wäre: http://localhost :8100/#/tabs/tab-1, richtig?
das sind meine Systeminfos:
`
CLI-Pakete: (/ionicv2/appv3/app/node_modules)
@ionic/cli-utils : 1.12.0
ionic (Ionic CLI) : 3.12.0
globale Pakete:
cordova (Cordova CLI) : 7.0.1
lokale Pakete:
@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
am 25. Sept. 2017
Definitiv auch ein Problem für mich mit Ionic 3.9.2. Ich verwende auch Tabs wie die anderen. Bei Bedarf gebe ich weitere Infos.
Ich erhalte eine URL, die wie folgt aussieht: http://localhost:8100/create/nav/n9/create .
lostdev
am 26. Sept. 2017
Ich stimme @tattivitorino völlig zu, dass es nicht wirklich notwendig ist, den
Eine andere Sache, die mir aufgefallen ist, ist, dass ich bei der Verwendung von Registerkarten keine URLs mit funktionierenden Parametern abrufen kann.
Das funktioniert nicht:
http://127.0.0.1 :8100/#/tabs/docs/documents/063b38ae-8edd-408b-b7fc-a346b1c16a8b
Während dies geschieht:
http://127.0.0.1 :8100/#/documents/063b38ae-8edd-408b-b7fc-a346b1c16a8b
Die Seite, die ich abrufen möchte, hat die folgende Segmentdefinition:
segment: "documents/:documentId"
felschr
am 9. Okt. 2017
Habe gerade ein Upgrade seit meinem vorherigen Kommentar mit 3.9.2 durchgeführt und es wird /nav/n4/ angezeigt. Gibt es Updates, um dies zu entfernen oder sollte ich auf 3.6.0 downgraden?
BEARBEITEN: Ignorieren Sie dies, es scheint eher ein Problem mit meinem package-lock.json in npm zu sein, die Installation von meinem package.json mit npm install --no-shrinkwrap zu erzwingen schien den Trick zu machen und 3.9.2 richtig zu installieren
reggaedit
am 22. Jan. 2018
Ich verwende 3.9.2. Problem besteht weiterhin.
AlexanderBrese
am 21. Feb. 2018
Habe dieses Problem auch am 3.9.2.
zB: /nav/n5/MasterLogin
TGibsonn
am 31. Mai 2018
Ich hatte dies normal funktionieren lassen und begann dann, den /nav/-Pfad zu erstellen.. auch unter Verwendung von 3.9.2!
Ich fand heraus, dass das Problem daran lag, dass ich mehr als einen / Schalter ion-nav auf der Hauptseite hatte (versuchte, ein Ionen-Split-Fenster anzuzeigen oder ohne)
mariohmol
am 10. Juni 2018
@mariohmol Das hat das Problem für mich gelöst. Danke, dass du das aufgenommen hast.
TGibsonn
am 11. Juni 2018
Danke für das Problem! Dieses Problem wird gesperrt, um Kommentare zu verhindern, die für das ursprüngliche Problem nicht relevant sind. Wenn dies immer noch ein Problem mit der neuesten Version von Ionic ist, erstellen Sie bitte ein neues Problem und stellen Sie sicher, dass die Vorlage vollständig ausgefüllt ist.
![ionitron-bot[bot] picture](https://avatars1.githubusercontent.com/in/8640?v=4&s=40)
ionitron-bot[bot]
am 1. Sept. 2018
Verwandte Themen
gio82
·
3Kommentare
Nick-The-Uncharted
·
3Kommentare
RobFerguson
·
3Kommentare
giammaleoni
·
3Kommentare
aslamj
·
3Kommentare
Hilfreichster Kommentar
Ich werde heute damit beginnen, daran zu arbeiten.
Vielen Dank,
Dan