Ionic-framework: Comportamento de URLs estranhos do Ionic 3.5.0 "nav / n4" e "tabs / t0 / page"

Criado em 13 jul. 2017 · 53Comentários · Fonte: ionic-team/ionic-framework

Versão iônica: (marque um com "x")
[] 1.x (para problemas com Ionic 1.x, use https://github.com/ionic-team/ionic-v1)
[] 2.x
[x] 3.x

Estou enviando um ... (marque um com "x")
[x] relatório de bug
[] solicitação de recurso
[] solicitação de suporte => Não envie solicitações de suporte aqui, use um destes canais: https://forum.ionicframework.com/ ou http://ionicworldwide.herokuapp.com/

Comportamento atual:

Comportamento de URLs estranhos do Ionic 3.5.0
Meu aplicativo tem as interfaces básicas! Uma LoginPage, SignupPage ... que após o login ou cadastro vai para a interface das abas .. nada extravagante, eu acho!
Em primeiro lugar, o "nav / n4" é o comportamento padrão?
http: // localhost : 8100 / # / nav / n4 / login
http: // localhost : 8100 / # / nav / n4 / app / tabs / t0 / perfil / perfil

Criei as páginas e as guias com g iônico
e para todas as páginas que tenho o segmento definido para seus, digamos, nomes como:
@IonicPage ({segmento: 'perfil'})

Comportamento esperado:

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

Passos para reproduzir:

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

}

Outra informação:

Informações iônicas: (execute ionic info em um prompt de terminal / cmd e cole a saída abaixo):

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

Fonte

tattivitorino

👍6

Comentários muito úteis

Vou começar a trabalhar nisso hoje.

Obrigado,
Dan

danbucholtz em 13 jul. 2017

👍18

Todos 53 comentários

A equipe está ciente disso.
Da última vez que verifiquei, isso estava em prioridade mais baixa do que outras coisas.
Espero que isso seja resolvido em breve.

AmitMY em 13 jul. 2017

@AmitMY obrigado pela resposta !!
sim, espero que também !! o link direto será um problema com esse comportamento, não acha?
Existe alguma solução alternativa que você conheça?

tattivitorino em 13 jul. 2017

Acho que é problemático e não sei se existe alguma solução alternativa

AmitMY em 13 jul. 2017

Vou começar a trabalhar nisso hoje.

Obrigado,
Dan

danbucholtz em 13 jul. 2017

👍18

muito obrigado @danbucholtz
Felicidades

tattivitorino em 13 jul. 2017

@tattivitorino obrigado, vc já perguntou isso, acabei de postar o mesmo no fórum https://forum.ionicframework.com/t/url-not-reset-on-ionic-serve-live-reload/98080

rashnk em 13 jul. 2017

👍1

Algum processo para isso?

vellengs em 16 jul. 2017

Foi corrigido na última atualização,

rashnk em 16 jul. 2017

@rashnk
Eu atualizei "npm install [email protected] --save --save-exact";
Ainda é " http: // localhost : 8100 / # / nav / n4 / start";

vellengs em 16 jul. 2017

👍1

siga este http://blog.ionic.io/announcing-ionic-3-5-2/

rashnk em 16 jul. 2017

Temos tido o mesmo problema com / nav / n4 /

rashnk - você está dizendo que isso foi definitivamente corrigido no 3.5.2?

Não foi abordado diretamente na postagem do blog em: http://blog.ionic.io/announcing-ionic-3-5-2/

Existe um changelog de correções que podemos verificar para esse tipo de coisa no futuro?

Obrigado :)

dev-manager-uk em 16 jul. 2017

@ dev-manager-uk Sim. Veja isto: https://github.com/ionic-team/ionic/releases

Sampath-Lokuge em 16 jul. 2017

👍1

Perfeito, obrigado.

Há algo que precisamos alterar nas configurações ou código? Ou deveria Just Work ™.

: D

dev-manager-uk em 16 jul. 2017

O problema ainda está presente em 3.5.2 e 3.5.3 para mim.

informação iônica

pacotes globais:

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

pacotes locais:

@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 em 16 jul. 2017

👍1

@rashnk , eu atualizei com sucesso. mas o problema ainda permanece, até mesmo criar um novo projeto para a página de carregamento lento usando a última versão;

vellengs em 17 jul. 2017

sim. Eu estava errado. o URL ainda tem conteúdo extra, mas eu estava trabalhando no Chrome com serviço iônico -l
não parece ser um problema, verifique as imagens

rashnk em 17 jul. 2017

Sim, o problema é url não esperado.

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

vellengs em 17 jul. 2017

@danbucholtz Estamos aguardando sua resposta, portanto eu também tenho o mesmo padrão de URL acima com o Ionic 3.5.3 mais recente

Sampath-Lokuge em 17 jul. 2017

👍3

Mesmo problema aqui. Depois de atualizar para 3.5, meu aplicativo usando deeplinking (um aplicativo de navegador hospedado em um servidor) não funcionou mais como esperado por causa dos URLs mágicos como 'nav / n4'.
Parece que o ionic3.5 mudou o padrão de navegação, mas espero que haja uma documentação detalhada em breve.
De qualquer forma, obrigado pelo trabalho árduo da equipe iônica.

agasbzj em 18 jul. 2017

O mesmo problema aqui. Estamos trabalhando em um aplicativo PWA e o link direto é muito importante.

Danielv3 em 18 jul. 2017

👎1 👍1

Mesmo aqui. Isso está segurando uma liberação para nós.

larpo1 em 18 jul. 2017

👎1

@ larpo1 Eu sugiro que você faça downgrade se puder, não houve muitas mudanças além do nav no 3.5.X

AmitMY em 18 jul. 2017

Olá a todos! Dan está atualmente trabalhando para encurtar nossos URLs e se livrar de um monte de "mágica" neles. Esperamos tê-lo pronto em breve.

jgw96 em 18 jul. 2017

👍11 🎉2

Obrigado Dan! Obrigado Justin!
Eles basicamente precisam funcionar apenas como URLs da web

Eles devem funcionar como:
https://www.test.com/about

Ao invés de:
https://www.test.com/#/nav/n4/about
ou mesmo:
https://www.test.com/#/about

dev-manager-uk em 18 jul. 2017

👍16 🎉1

Mesmo aqui.

Natanael1234 em 21 jul. 2017

@ dev-manager-uk Em relação ao https://www.test.com/#/about isso é outro assunto.

Você o remove alterando locationStrategy no módulo do aplicativo:

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

sergiocarneiro em 24 jul. 2017

👍3

Obrigado @sergiocarneiro
Vou tentar!

dev-manager-uk em 25 jul. 2017

Olá @ jgw96
Você tem um eta aproximado para uma versão para corrigir o link direto?
Obrigado :-)

dev-manager-uk em 25 jul. 2017

👍1

Tive que fazer um downgrade para camuflar este problema:
"npm install [email protected] --save --save-exact"

NiltonMorais em 26 jul. 2017

Isso será publicado amanhã. Os commits já estão no Github, então vou fechar isso.

Obrigado,
Dan

danbucholtz em 26 jul. 2017

👍9 🎉4 ❤1

Sim, seria bom ter uma solução

kirillgroshkov em 26 jul. 2017

Não tenho certeza se isso não tem problemas, mas vocês deveriam usar o nightly 3.5.3-201707251952 , que tem esta correção. E se houver problemas com ele, poste um problema antes do lançamento do 3.6

AmitMY em 26 jul. 2017

👍2

Pode confirmar que $ npm install [email protected] --save --save-exact funciona para mim. Obrigado!

Editar: use 3.6.0

reggaedit em 26 jul. 2017

👍1

Desculpe, tivemos um problema imprevisto e será enviado amanhã. Se você quiser acesso antecipado, verifique npm install ionic-angular@nightly . Se você estiver usando guias e vendo as coisas quebrarem na atualização, esta é uma limitação conhecida do nosso sistema que será corrigida no Ionic 4 com uma ligeira mudança de API. Nesse ínterim, você pode usar tabUrlPath no ion-tab para atenuá-lo. Basicamente, se você tiver um link direto segment e um tab com o mesmo name/title , pode haver um conluio aqui. Fora isso, tudo está funcionando muito bem até agora.

Obrigado,
Dan

danbucholtz em 26 jul. 2017

👍1

@sergiocarneiro Infelizmente, adicionar essa configuração não removerá nav/n4 nem você poderá acessar esse url diretamente.

glebinsky em 8 ago. 2017

Pode confirmar $ npm install [email protected] --save --save-exact works for me. Obrigado!

numerized em 9 ago. 2017

@numerized Você pode usar 3.6.0 em seu lugar.

AmitMY em 9 ago. 2017

Oi,
Estou no cli iônico v3.9.2 e ainda tenho nav / n4 na barra de url.
Na verdade eu até tenho
/ # / nav / n4 / pu / loginpage / nav / n5 / pr / privatepage
Como tenho um nav público e um privado ...

Já passei da 3.6.0, então não tenho certeza de qual é o problema, exceto que está causando problemas enormes

summerchill em 12 set. 2017

Você precisa usar o angular iônico 3.6.0.

AmitMY em 12 set. 2017

Obrigado AmitMY, infelizmente não corrige para mim ...

summerchill em 12 set. 2017

O que mais posso fazer?

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

summerchill em 12 set. 2017

Mesma coisa aqui, estou em [email protected] e sempre com o mesmo problema !!!

lud42 em 15 set. 2017

Além de atualizar o iônico e o angular iônico para o mais recente, @danbucholtz , há algo mais a ser feito?
Para mim, funciona usando o mais recente

AmitMY em 15 set. 2017

Então, se eu executar o ionc-angular 3.6.1 e fizer:

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

Funciona para mim

tskweres em 18 set. 2017

👍1

Olá a todos! Parece que muita coisa aconteceu e mudou desde que criei esse problema! Posso ver que parte dos problemas de url que tínhamos antes foram corrigidos! Para as páginas que não estão dentro de um sistema de guias, tudo funciona bem! mas não é o caso com as guias.

Acabei de criar um aplicativo novo com algumas páginas como login, inscrição etc. e o url é perfeito para eles!
http: // localhost : 8100 / # / login
http: // localhost : 8100 / # / signup

Quando chego à página de guias (no login), é o que eu tenho:

http: // localhost : 8100 / # / tabs / tab1 / tab1
aqui eu não configurei o segmento no IonicPage nem o tabUrlPath na guia de íons

http: // localhost : 8100 / # / tabs / tab-1 / tab1
aqui eu configuro o tabUrlPath na guia ion ( )

http: // localhost : 8100 / # / tabs / tab-1 / tab-1
aqui eu configuro ambos
@IonicPage ({
segmento: 'tab-1'
})

me parece que tabUrlPath está relacionado ao primeiro segmento / tab-1 e o segmento IonicPage é o segundo segmento!

Existe uma maneira de se livrar de qualquer um deles? Não vejo sentido em ter os dois segmentos! O ideal seria: http: // localhost : 8100 / # / tabs / tab-1, certo?

essas são as informações do meu sistema:

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

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

pacotes globais:

cordova (Cordova CLI) : 7.0.1

pacotes locais:

@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 em 25 set. 2017

👍3

Definitivamente, um problema para mim também com o Ionic 3.9.2. Também estou usando guias como as outras. Fornecerei mais informações, se necessário.

Recebo um url parecido com o seguinte: http://localhost:8100/create/nav/n9/create .

lostdev em 26 set. 2017

Estou totalmente de acordo com @tattivitorino que não há realmente necessidade de ter o nome da guia e o nome da página no URL. Imo, os nomes das guias devem ser completamente substituídos pelo nome da página.

Outra coisa que notei é que não consigo obter URLs com parâmetros funcionando ao usar guias.
Isso não funciona:
http://127.0.0.1 : 8100 / # / tabs / docs / documents / 063b38ae-8edd-408b-b7fc-a346b1c16a8b
Enquanto isso:
http://127.0.0.1 : 8100 / # / documents / 063b38ae-8edd-408b-b7fc-a346b1c16a8b

A página que desejo obter tem a seguinte definição de segmento:
segment: "documents/:documentId"

felschr em 9 out. 2017

👍1

Acabei de fazer uma atualização desde o meu comentário anterior, usando 3.9.2 e está mostrando / nav / n4 /. Alguma atualização para removê-lo ou devo fazer o downgrade para 3.6.0?

EDIT: Ignore isso, parece que era mais um problema com meu package-lock.json no npm, forçar a instalação do meu package.json com npm install --no-shrinkwrap parecia funcionar e instalar corretamente 3.9.2

reggaedit em 22 jan. 2018

Estou executando o 3.9.2. O problema persiste.

AlexanderBrese em 21 fev. 2018

👍3

Tendo esse problema também no 3.9.2.

por exemplo: / nav / n5 / MasterLogin

TGibsonn em 31 mai. 2018

Fiz isso funcionando normalmente e depois comecei a fazer o / nav / path .. usando o 3.9.2 também!

Eu descobri que o problema era porque eu estava tendo mais de um / switch ion-nav na página principal (estava tentando mostrar um painel de divisão de íons ou sem)

mariohmol em 10 jun. 2018

🎉1

@mariohmol Isso resolveu o problema para mim. Obrigado por incluir isso.

TGibsonn em 11 jun. 2018

👍1

Obrigado pelo problema! Este problema está sendo bloqueado para evitar comentários que não são relevantes ao problema original. Se isso ainda for um problema com a versão mais recente do Ionic, crie um novo problema e certifique-se de que o modelo esteja totalmente preenchido.