Ionic-framework: Ionic 3.5.0 странное поведение URL-адресов "nav / n4" и "tabs / t0 / page"

Созданный на 13 июл. 2017 · 53Комментарии · Источник: ionic-team/ionic-framework

Ионная версия: (отметьте один с "x")
[] 1.x (Для проблем с Ionic 1.x используйте https://github.com/ionic-team/ionic-v1)
[] 2.x
[x] 3.x

Я отправляю ... (отметьте "x")
[x] отчет об ошибке
[] запрос функции
[] запрос поддержки => Пожалуйста, не отправляйте запросы на поддержку здесь, используйте один из этих каналов: https://forum.ionicframework.com/ или http://ionicworldwide.herokuapp.com/

Текущее поведение:

Ionic 3.5.0 странное поведение URL-адресов
В моем приложении есть базовые интерфейсы! LoginPage, RegistrationPage ... что после входа в систему или регистрации он переходит в интерфейс вкладок ... я думаю, ничего особенного!
Прежде всего "nav / n4" - это поведение по умолчанию?
http: // localhost : 8100 / # / nav / n4 / логин
http: // локальный : 8100 / # / nav / n4 / app / tabs / t0 / perfil / perfil

Я создал страницы и вкладки с помощью ionic g
и для всех страниц у меня есть сегмент, установленный для их, скажем так, имен, таких как:
@IonicPage ({сегмент: 'perfil'})

Ожидаемое поведение:

http: // localhost : 8100 / # / логин
http: // локальный : 8100 / # / приложение / перфил

Действия по воспроизведению:

Связанный код:

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

}

Дополнительная информация:

Ионная информация: (запустите ionic info из приглашения терминала / cmd и вставьте вывод ниже):

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

👍6

Самый полезный комментарий

Я собираюсь начать работать над этим сегодня.

Спасибо,
Дэн

danbucholtz 13 июл. 2017

👍18

Все 53 Комментарий

Команда знает об этом.
Последнее, что я проверял, это было более низким приоритетом, чем другие вещи.
Я надеюсь, что это тоже скоро будет рассмотрено.

AmitMY 13 июл. 2017

@AmitMY спасибо за ответ !!
да, я тоже на это надеюсь !! диплинкинг будет проблемой из-за такого поведения, не так ли?
Есть ли какой-нибудь обходной путь, о котором вы знаете?

tattivitorino 13 июл. 2017

Я думаю, что это проблематично, и я не знаю, существует ли какое-либо обходное решение.

AmitMY 13 июл. 2017

Я собираюсь начать работать над этим сегодня.

Спасибо,
Дэн

danbucholtz 13 июл. 2017

👍18

большое спасибо @danbucholtz
ваше здоровье

tattivitorino 13 июл. 2017

@tattivitorino, спасибо, вы уже спрашивали об этом, я только что опубликовал то же самое на форуме https://forum.ionicframework.com/t/url-not-reset-on-ionic-serve-live-reload/98080

rashnk 13 июл. 2017

👍1

Любой процесс для этого?

vellengs 16 июл. 2017

Это исправлено в последнем обновлении,

rashnk 16 июл. 2017

@rashnk
Я обновил "npm install
Это все еще " http: // localhost : 8100 / # / nav / n4 / start";

vellengs 16 июл. 2017

👍1

следуйте этому http://blog.ionic.io/announcing-ionic-3-5-2/

rashnk 16 июл. 2017

У нас была такая же проблема с / nav / n4 /

rashnk - вы говорите, что это точно исправлено в 3.5.2?

Это не было напрямую рассмотрено в сообщении блога по адресу: http://blog.ionic.io/announcing-ionic-3-5-2/.

Есть ли список исправлений, которые мы можем проверить на предмет подобных вещей в будущем?

Спасибо :)

dev-manager-uk 16 июл. 2017

@ dev-manager-uk Да, см. это: https://github.com/ionic-team/ionic/releases

Sampath-Lokuge 16 июл. 2017

👍1

Отлично, спасибо.

Есть ли что-то, что нам нужно изменить в настройках или коде? Или это должно просто работать ™.

: D

dev-manager-uk 16 июл. 2017

Для меня проблема все еще присутствует как в 3.5.2, так и в 3.5.3.

ионная информация

глобальные пакеты:

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

локальные пакеты:

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

Система:

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 16 июл. 2017

👍1

@rashnk , я успешно

vellengs 17 июл. 2017

да. я был неправ. URL-адрес все еще имеет дополнительное содержимое, но я работал над хромом с помощью ionic serve -l
вроде не проблема, проверьте скриншоты

rashnk 17 июл. 2017

Да, проблема заключается в непредвиденном URL.

Ожидаемое поведение:
http: // localhost : 8100 / # / логин
http: // локальный : 8100 / # / приложение / перфил

vellengs 17 июл. 2017

@danbucholtz Мы ждем вашего ответа, поэтому у меня тоже есть тот же шаблон URL, что и выше, с последней версией Ionic 3.5.3

Sampath-Lokuge 17 июл. 2017

👍3

Здесь та же проблема. После обновления до 3.5 мое приложение, использующее deeplinking (приложение браузера, размещенное на сервере), больше не работало должным образом из-за волшебных URL-адресов, таких как 'nav / n4'.
Похоже, ionic3.5 изменил шаблон навигации, но я надеюсь, что скоро будет подробная документация.
В любом случае, спасибо за тяжелую работу ionic-team.

agasbzj 18 июл. 2017

Здесь та же проблема. Мы работаем над приложением PWA, и диплинкинг очень важен.

Danielv3 18 июл. 2017

👎1 👍1

То же самое. Это задержка для нас.

larpo1 18 июл. 2017

👎1

@ larpo1 Я предлагаю вам

AmitMY 18 июл. 2017

Всем здравствуйте! Дэн в настоящее время работает над сокращением наших URL-адресов и избавлением от большого количества "магии" в них. Мы надеемся, что это скоро будет готово.

jgw96 18 июл. 2017

👍11 🎉2

Спасибо, Дэн! Спасибо, Джастин!
В основном они должны работать как веб-адреса.

Они должны работать так:
https://www.test.com/about

Вместо того:
https://www.test.com/#/nav/n4/about
или даже:
https://www.test.com/#/about

dev-manager-uk 18 июл. 2017

👍16 🎉1

То же самое.

Natanael1234 21 июл. 2017

@ dev-manager-uk Что касается https://www.test.com/#/ , это уже другая тема.

Вы удаляете его, изменяя locationStrategy в модуле приложения:

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

sergiocarneiro 24 июл. 2017

👍3

Спасибо @sergiocarneiro
Я попробую!

dev-manager-uk 25 июл. 2017

Привет @ jgw96
Есть ли у вас пример релиза по исправлению диплинкинга?
Спасибо :-)

dev-manager-uk 25 июл. 2017

👍1

Чтобы замаскировать эту проблему, мне пришлось перейти на более раннюю версию:
"npm install [email protected] --save --save-точный"

NiltonMorais 26 июл. 2017

Это будет опубликовано завтра. Коммиты уже находятся на Github, поэтому я собираюсь закрыть это.

Спасибо,
Дэн

danbucholtz 26 июл. 2017

👍9 🎉4 ❤1

Да, было бы неплохо исправить

kirillgroshkov 26 июл. 2017

Я не уверен, что здесь нет проблем, но вы, ребята, должны использовать ночную программу 3.5.3-201707251952 , в которой есть это исправление. И если с ним возникнут проблемы, опубликуйте вопрос до выпуска 3.6.

AmitMY 26 июл. 2017

👍2

Могу подтвердить, что $ npm install [email protected] --save --save-exact работает для меня. Спасибо!

Изменить: использовать 3.6.0

reggaedit 26 июл. 2017

👍1

Извините, у нас возникла непредвиденная проблема, мы отправим товар завтра. Если вам нужен ранний доступ, обратите внимание на npm install ionic-angular@nightly . Если вы используете вкладки и видите, что при обновлении что-то ломается, это известное ограничение нашей системы, которое будет исправлено в Ionic 4 с небольшим изменением API. А пока вы можете использовать tabUrlPath на ion-tab чтобы смягчить его. По сути, если у вас есть deeplink segment и tab с одинаковыми name/title , здесь потенциально может быть сговор. Кроме этого, пока все работает отлично.

Спасибо,
Дэн

danbucholtz 26 июл. 2017

👍1

@sergiocarneiro К сожалению, добавление этого параметра не приведет к удалению nav/n4 и вы не сможете напрямую перейти к этому URL-адресу.

glebinsky 8 авг. 2017

Могу подтвердить, что $ npm install [email protected] --save --save-exact работает для меня. Спасибо!

numerized 9 авг. 2017

@numerized Вместо этого вы можете использовать 3.6.0.

AmitMY 9 авг. 2017

Привет,
Я использую ionic cli v3.9.2, и у меня все еще есть nav / n4 в строке URL.
На самом деле у меня даже есть
/ # / nav / n4 / pu / loginpage / nav / n5 / pr / privatepage
Поскольку у меня есть общедоступный и частный навигатор ...

Я прошёл 3.6.0, поэтому не знаю, в чем проблема, за исключением того, что она вызывает серьезные проблемы.

summerchill 12 сент. 2017

Вам нужно использовать 3.6.0 ionic angular.

AmitMY 12 сент. 2017

Спасибо, AmitMY, к сожалению, мне это не помогает ...

summerchill 12 сент. 2017

Что еще я мог сделать?

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

summerchill 12 сент. 2017

То же самое здесь, я на [email protected] и всегда

lud42 15 сент. 2017

Помимо обновления ionic и ionic-angular до последней версии, @danbucholtz есть ли что-то еще, что нужно сделать?
Для меня это работает с использованием последних

AmitMY 15 сент. 2017

Итак, если я запустил ionc-angular 3.6.1 и сделаю:

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

Меня устраивает

tskweres 18 сент. 2017

👍1

Всем привет! Кажется, с тех пор, как я создал эту проблему, многое произошло и изменилось! Я вижу, что часть проблем с URL, которые у нас были до этого, исправлены! Для страниц, которые не находятся внутри системы вкладок, все работает нормально! но это не относится к вкладкам.

Я только что создал новое приложение с парой страниц, таких как логин, регистрация и т. Д., И URL-адрес идеально подходит для них!
http: // localhost : 8100 / # / логин
http: // localhost : 8100 / # / регистрация

Когда я перехожу на страницу вкладок (при входе в систему), это то, что у меня есть:

http: // локальный : 8100 / # / tabs / tab1 / tab1
здесь я не настраивал сегмент на IonicPage или tabUrlPath на ионной вкладке

http: // локальный : 8100 / # / tabs / tab-1 / tab1
здесь я настраиваю tabUrlPath на ионной вкладке ( )

http: // локальный : 8100 / # / вкладки / вкладка-1 / вкладка-1
здесь я настраиваю оба
@IonicPage ({
сегмент: 'tab-1'
})

мне кажется, что tabUrlPath связан с первым сегментом / tab-1, а сегмент IonicPage - это второй сегмент!

Есть ли способ избавиться от любого из них? Я не вижу смысла иметь оба сегмента! Идеально было бы: http: // localhost : 8100 / # / tabs / tab-1, верно?

это моя системная информация:

`
пакеты cli: (/ ionicv2 / appv3 / app / node_modules)

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

глобальные пакеты:

cordova (Cordova CLI) : 7.0.1

локальные пакеты:

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

Система:

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 25 сент. 2017

👍3

Определенно проблема для меня с Ionic 3.9.2. Я также использую вкладки, как и другие. При необходимости предоставлю дополнительную информацию.

Я получаю URL-адрес, который выглядит следующим образом: http://localhost:8100/create/nav/n9/create .

lostdev 26 сент. 2017

Я полностью согласен с @tattivitorino, что на самом деле нет необходимости

Еще я заметил, что я не могу получить URL-адреса с параметрами, работающими при использовании вкладок.
Это не работает:
http://127.0.0.1 : 8100 / # / tabs / docs / documents / 063b38ae-8edd-408b-b7fc-a346b1c16a8b
Пока это делает:
http://127.0.0.1 : 8100 / # / documents / 063b38ae-8edd-408b-b7fc-a346b1c16a8b

Страница, которую я хочу получить, имеет следующее определение сегмента:
segment: "documents/:documentId"

felschr 9 окт. 2017

👍1

Только что сделал обновление с момента моего предыдущего комментария, используя 3.9.2, и он показывает / nav / n4 /. Есть ли какие-либо обновления для удаления этого или мне следует перейти на версию 3.6.0?

РЕДАКТИРОВАТЬ: проигнорируйте это, похоже, что это была больше проблема с моим package-lock.json в npm, принудительная установка из моего package.json с помощью npm install --no-shrinkwrap похоже, сделала трюк и правильно установила 3.9.2

reggaedit 22 янв. 2018

Я использую 3.9.2. Проблема сохраняется.

AlexanderBrese 21 февр. 2018

👍3

Имея эту проблему также на 3.9.2.

например: / nav / n5 / MasterLogin

TGibsonn 31 мая 2018

У меня это работало нормально, а затем я начал создавать / nav / path .., используя также 3.9.2!

Я обнаружил, что проблема заключалась в том, что у меня было более одного / switch ion-nav на главной странице (пытался показать панель с разделением ионов или без нее)

mariohmol 10 июн. 2018

🎉1

@mariohmol Это решило проблему для меня. Спасибо, что включили это.

TGibsonn 11 июн. 2018

👍1

Спасибо за вопрос! Эта проблема заблокирована, чтобы предотвратить комментарии, не относящиеся к исходной проблеме. Если это все еще проблема с последней версией Ionic, создайте новую проблему и убедитесь, что шаблон полностью заполнен.