Ionic-framework: Ionic 3.5.0 comportement étrange des URL "nav/n4" et "tabs/t0/page"

Créé le 13 juil. 2017 · 53Commentaires · Source: ionic-team/ionic-framework

Version ionique : (cocher une avec "x")
[ ] 1.x (Pour les problèmes Ionic 1.x, veuillez utiliser https://github.com/ionic-team/ionic-v1)
[ ] 2.x
[x ] 3.x

Je soumets un ... (cochez un avec "x")
[x ] rapport de bogue
[ ] demande de fonctionnalité
[ ] demande d'assistance => Veuillez ne pas soumettre de demandes d'assistance ici, utilisez l'un de ces canaux : https://forum.ionicframework.com/ ou http://ionicworldwide.herokuapp.com/

Comportement actuel :

Ionic 3.5.0 comportement étrange des URL
Mon application a les interfaces de base ! Une page de connexion, une page d'inscription... qui, après la connexion ou l'inscription, accède à l'interface des onglets... rien d'extraordinaire, je suppose !
Tout d'abord, le "nav/n4" est-il le comportement par défaut ?
http://localhost :8100/#/nav/n4/login
http://localhost :8100/#/nav/n4/app/tabs/t0/perfil/perfil

J'ai créé les pages et les onglets avec ionic g
et pour toutes les pages, j'ai le segment défini pour leurs, disons, des noms comme :
@IonicPage({ segment:'perfil' })

Comportement prévisible:

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

Étapes à reproduire :

Code associé :

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');
  }

}

Les autres informations:

Informations ioniques : (exécutez ionic info partir d'une invite de terminal/cmd et collez la sortie ci-dessous) :

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

Source

tattivitorino

👍6

Commentaire le plus utile

Je vais commencer à travailler dessus aujourd'hui.

Merci,
Dan

danbucholtz le 13 juil. 2017

👍18

Tous les 53 commentaires

L'équipe en est consciente.
La dernière fois que j'ai vérifié, c'était une priorité inférieure à celle des autres choses.
J'espère que cela sera également abordé bientôt.

AmitMY le 13 juil. 2017

@AmitMY merci pour la réponse !!
oui j'espère aussi !! le deeplinking sera un problème avec ce comportement, ne pensez-vous pas ?
Connaissez-vous une solution de contournement ?

tattivitorino le 13 juil. 2017

Je pense que c'est problématique, et je ne sais pas s'il existe une solution de contournement

AmitMY le 13 juil. 2017

Je vais commencer à travailler dessus aujourd'hui.

Merci,
Dan

danbucholtz le 13 juil. 2017

👍18

merci beaucoup @danbucholtz
Tchin Tchin

tattivitorino le 13 juil. 2017

@tattivitorino merci, vous l'avez déjà demandé, je viens de poster la même chose sur le forum https://forum.ionicframework.com/t/url-not-reset-on-ionic-serve-live-reload/98080

rashnk le 13 juil. 2017

👍1

Un processus pour cela?

vellengs le 16 juil. 2017

Il est corrigé dans la dernière mise à jour,

rashnk le 16 juil. 2017

@rashnk
J'ai mis à jour "npm install [email protected] --save --save-exact" ;
C'est toujours " http://localhost :8100/#/nav/n4/start" ;

vellengs le 16 juil. 2017

👍1

suivez ceci http://blog.ionic.io/announcing-ionic-3-5-2/

rashnk le 16 juil. 2017

Nous avons eu le même problème avec /nav/n4/

rashnk - êtes-vous en train de dire que c'est définitivement corrigé dans 3.5.2 ?

Cela n'a pas été directement abordé dans le billet de blog à l'adresse : http://blog.ionic.io/announcing-ionic-3-5-2/

Existe-t-il un journal des modifications que nous pouvons vérifier pour ce genre de chose à l'avenir ?

Merci :)

dev-manager-uk le 16 juil. 2017

@dev-manager-uk Oui.Voir ceci : https://github.com/ionic-team/ionic/releases

Sampath-Lokuge le 16 juil. 2017

👍1

Super merci.

Y a-t-il quelque chose que nous devons modifier dans les paramètres ou le code ? Ou il devrait Just Work™.

:RÉ

dev-manager-uk le 16 juil. 2017

Le problème est toujours présent dans les deux 3.5.2 et 3.5.3 pour moi.

informations ioniques

forfaits mondiaux :

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

forfaits locaux :

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

Système:

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 le 16 juil. 2017

👍1

@rashnk , j'ai réussi à mettre à niveau. mais le problème persiste, même créer un nouveau projet pour la page de chargement paresseux en utilisant la dernière version ;

vellengs le 17 juil. 2017

Oui. J'avais tort. l'URL a toujours du contenu supplémentaire, mais je travaillais sur chrome avec ionic serve -l
cela ne semble pas être un problème, vérifiez les captures d'écran

rashnk le 17 juil. 2017

Oui, le problème n'est pas prévu pour l'URL.

Comportement prévisible:
http://localhost :8100/#/login
http://localhost :8100/#/app/perfil

vellengs le 17 juil. 2017

@danbucholtz Nous attendons votre réponse, donc moi aussi j'ai le même modèle d'URL que ci-dessus avec le dernier Ionic 3.5.3

Sampath-Lokuge le 17 juil. 2017

👍3

Même problème ici. Après la mise à niveau vers 3.5, mon application utilisant le deeplinking (une application de navigateur hébergée sur un serveur) ne fonctionnait plus comme prévu à cause des URL magiques comme "nav/n4".
Il semble que ionic3.5 ait changé le modèle de navigation, mais j'espère qu'il y aura bientôt une documentation détaillée.
Quoi qu'il en soit, merci pour le travail acharné d'ionic-team.

agasbzj le 18 juil. 2017

Même problème ici. Nous travaillons sur une application PWA et le deeplinking est très important.

Danielv3 le 18 juil. 2017

👎1 👍1

Pareil ici. Cela nous retarde une libération.

larpo1 le 18 juil. 2017

👎1

@larpo1 Je vous suggère de rétrograder si vous le pouvez, il n'y a pas eu beaucoup de changements autres que la navigation dans 3.5.X

AmitMY le 18 juil. 2017

Bonjour à tous! Dan travaille actuellement à raccourcir nos URL et à se débarrasser d'une grande partie de la « magie » qu'elles contiennent. Nous espérons que cela sera bientôt prêt.

jgw96 le 18 juil. 2017

👍11 🎉2

Merci Dan ! Merci Justine !
Ils doivent simplement fonctionner comme des URL Web

Ils devraient fonctionner comme :
https://www.test.com/about

À la place de:
https://www.test.com/#/nav/n4/about
ou même:
https://www.test.com/#/about

dev-manager-uk le 18 juil. 2017

👍16 🎉1

Pareil ici.

Natanael1234 le 21 juil. 2017

@dev-manager-uk Concernant le https://www.test.com/#/about c'est un autre sujet.

Vous le supprimez en modifiant le locationStrategy dans le module de l'application :

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

sergiocarneiro le 24 juil. 2017

👍3

Merci @sergiocarneiro
Je vais essayer ça !

dev-manager-uk le 25 juil. 2017

Salut @jgw96
Avez-vous une version approximative d'une version pour corriger les liens profonds ?
Merci :-)

dev-manager-uk le 25 juil. 2017

👍1

J'ai dû faire un downgrade pour camoufler ce problème :
"npm install [email protected] --save --save-exact"

NiltonMorais le 26 juil. 2017

Celui-ci sera publié demain. Les commits sont déjà sur Github, donc je vais fermer ça.

Merci,
Dan

danbucholtz le 26 juil. 2017

👍9 🎉4 ❤1

Oui, ce serait bien d'avoir une solution

kirillgroshkov le 26 juil. 2017

Je ne sais pas si cela ne pose pas de problèmes, mais vous devriez utiliser le nightly, 3.5.3-201707251952 , qui a ce correctif. Et s'il y a des problèmes avec cela, veuillez poster un problème avant la sortie de 3.6

AmitMY le 26 juil. 2017

👍2

Peut confirmer que $ npm install [email protected] --save --save-exact fonctionne pour moi. Merci!

Modifier : utilisez la 3.6.0

reggaedit le 26 juil. 2017

👍1

Désolé, nous avons eu un problème imprévu et nous expédierons demain. Si vous souhaitez un accès anticipé, consultez npm install ionic-angular@nightly . Si vous utilisez des onglets et voyez des choses se casser lors d'une actualisation, il s'agit d'une limitation connue de notre système qui sera corrigée dans Ionic 4 avec un léger changement d'API. En attendant, vous pouvez utiliser tabUrlPath sur le ion-tab pour l'atténuer. Fondamentalement, si vous avez un lien profond segment et un tab avec le même name/title , il pourrait y avoir une collusion ici. A part ça, tout fonctionne à merveille jusqu'à présent.

Merci,
Dan

danbucholtz le 26 juil. 2017

👍1

@sergiocarneiro Malheureusement, l'ajout de ce paramètre ne supprimera pas nav/n4 et vous ne pourrez pas accéder directement à cette URL.

glebinsky le 8 août 2017

Peut confirmer $ npm install [email protected] --save --save-exact fonctionne pour moi. Merci!

numerized le 9 août 2017

@numerized Vous pouvez utiliser 3.6.0 à la place.

AmitMY le 9 août 2017

Salut,
Je suis sur ionic cli v3.9.2 et j'ai toujours nav/n4 dans la barre d'url.
En fait j'ai même
/#/nav/n4/pu/loginpage/nav/n5/pr/privatepage
Comme j'ai une navigation publique et privée...

J'ai dépassé la version 3.6.0, donc je ne sais pas quel est le problème, sauf qu'il cause d'énormes problèmes

summerchill le 12 sept. 2017

Vous devez utiliser 3.6.0 angulaire ionique.

AmitMY le 12 sept. 2017

Merci AmitMY, malheureusement cela ne résout pas le problème pour moi...

summerchill le 12 sept. 2017

Que pourrais-je faire d'autre ?

screen shot 2017-09-12 at 4 32 50 pm

summerchill le 12 sept. 2017

Même chose ici, je suis sur [email protected] et toujours le même problème !!!

lud42 le 15 sept. 2017

À part la mise à niveau de ionic et ionic-angular vers le dernier, @danbucholtz y a-t-il autre chose à faire ?
Pour moi, cela fonctionne en utilisant le dernier

AmitMY le 15 sept. 2017

Donc, si je lance ionc-angular 3.6.1 et fais:

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

Ça marche pour moi

tskweres le 18 sept. 2017

👍1

Bonjour à tous ! il semble que beaucoup de choses se soient passées et changé depuis que j'ai créé ce problème ! Je peux voir qu'une partie des problèmes d'URL que nous avions auparavant sont résolus ! Pour les pages qui ne sont pas à l'intérieur d'un système d'onglets, tout fonctionne bien ! mais ce n'est pas le cas avec les onglets.

Je viens de créer une nouvelle application avec quelques pages comme la connexion, l'inscription, etc. et l'URL est parfaite pour celles-ci !
http://localhost :8100/#/login
http://localhost :8100/#/signup

Lorsque j'arrive à la page des onglets (lors de la connexion), voici ce que j'ai :

http://localhost :8100/#/tabs/tab1/tab1
ici, je n'ai pas configuré le segment sur IonicPage ni le tabUrlPath sur l'ion-tab

http://localhost :8100/#/tabs/tab-1/tab1
ici, j'ai configuré le tabUrlPath sur l'ion-tab ( )

http://localhost :8100/#/tabs/tab-1/tab-1
ici j'ai configuré les deux
@IonicPage({
segment : 'tab-1'
})

il me semble que tabUrlPath est lié au premier segment /tab-1 et que le segment IonicPage est le 2ème segment !

Existe-t-il un moyen de s'en débarrasser ? Je ne vois pas l'intérêt d'avoir les deux segments ! L'idéal serait : http://localhost :8100/#/tabs/tab-1, non ?

c'est mon info système:

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

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

forfaits mondiaux :

cordova (Cordova CLI) : 7.0.1

forfaits locaux :

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

Système:

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 le 25 sept. 2017

👍3

Certainement un problème pour moi aussi avec Ionic 3.9.2. J'utilise aussi des onglets comme les autres. Je fournirai plus d'informations si nécessaire.

J'obtiens une URL qui ressemble à ce qui suit : http://localhost:8100/create/nav/n9/create .

lostdev le 26 sept. 2017

Je suis tout à fait d'accord avec @tattivitorino pour dire qu'il n'est pas vraiment nécessaire d'avoir le nom de l'onglet et le nom de la page dans l'URL. Imo, les noms des onglets doivent être complètement remplacés par le nom de la page.

Une autre chose que j'ai remarquée est que je ne parviens pas à obtenir des URL avec des paramètres fonctionnant lors de l'utilisation d'onglets.
Cela ne fonctionne pas :
http://127.0.0.1 :8100/#/tabs/docs/documents/063b38ae-8edd-408b-b7fc-a346b1c16a8b
Alors que cela fait:
http://127.0.0.1 :8100/#/documents/063b38ae-8edd-408b-b7fc-a346b1c16a8b

La page que je veux obtenir a la définition de segment suivante :
segment: "documents/:documentId"

felschr le 9 oct. 2017

👍1

Je viens de faire une mise à niveau depuis mon commentaire précédent, en utilisant 3.9.2 et il affiche /nav/n4/ . Des mises à jour pour supprimer cela ou devrais-je rétrograder à 3.6.0 ?

EDIT: Ignorez cela, il semble que ce soit plus un problème avec mon package-lock.json dans npm, forcer l'installation à partir de mon package.json avec npm install --no-shrinkwrap semblait faire l'affaire et installer correctement 3.9.2

reggaedit le 22 janv. 2018

J'exécute 3.9.2. Le problème persiste.

AlexanderBrese le 21 févr. 2018

👍3

Ayant également ce problème sur 3.9.2.

ex : /nav/n5/MasterLogin

TGibsonn le 31 mai 2018

Cela fonctionnait normalement, puis j'ai commencé à créer le chemin /nav/ .. en utilisant également la 3.9.2!

J'ai découvert que le problème était dû au fait que j'avais plus d'un/commutateur ion-nav dans la page principale (j'essayais d'afficher un volet divisé en ions ou sans)

mariohmol le 10 juin 2018

🎉1

@mariohmol Cela a résolu le problème pour moi. Merci de l'avoir inclus.

TGibsonn le 11 juin 2018

👍1

Merci pour le problème ! Ce problème est verrouillé pour empêcher les commentaires qui ne sont pas pertinents pour le problème d'origine. Si le problème persiste avec la dernière version d'Ionic, veuillez créer un nouveau problème et vous assurer que le modèle est entièrement rempli.