Ionic-framework: Ionic 3.5.0 perilaku URL aneh "nav/n4" dan "tabs/t0/page"

Dibuat pada 13 Jul 2017 · 53Komentar · Sumber: ionic-team/ionic-framework

Versi ionik: (centang satu dengan "x")
[ ] 1.x (Untuk masalah Ionic 1.x, silakan gunakan https://github.com/ionic-team/ionic-v1)
[ ] 2.x
[x ] 3.x

Saya mengirimkan ... (centang satu dengan "x")
[x ] laporan bug
[ ] permintaan fitur
[ ] permintaan dukungan => Tolong jangan kirimkan permintaan dukungan di sini, gunakan salah satu saluran ini: https://forum.ionicframework.com/ atau http://ionicworldwide.herokuapp.com/

Perilaku saat ini:

Ionic 3.5.0 perilaku URL aneh
Aplikasi saya memiliki antarmuka dasar! Sebuah LoginPage, SignupPage... bahwa setelah login atau signup ia pergi ke antarmuka tab.. tidak ada yang mewah kurasa!
Pertama-tama "nav/n4" apakah itu perilaku default?
http://localhost :8100/#/nav/n4/login
http://localhost :8100/#/nav/n4/app/tabs/t0/perfil/perfil

Saya membuat halaman dan Tab dengan ionic g
dan untuk semua halaman saya memiliki segmen yang ditetapkan untuk mereka, katakanlah, nama-nama seperti:
@IonicPage({ segmen:'perfil' })

Perilaku yang diharapkan:

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

Langkah-langkah untuk mereproduksi:

Kode terkait:

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

}

Informasi lainnya:

Info ionik: (jalankan ionic info dari terminal/cmd Prompt dan tempel keluaran di bawah):

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

Sumber

tattivitorino

👍6

Komentar yang paling membantu

Saya akan mulai mengerjakan ini hari ini.

Terima kasih,
Dan

danbucholtz pada 13 Jul 2017

👍18

Semua 53 komentar

Tim menyadari hal ini.
Terakhir saya periksa, ini pada prioritas lebih rendah daripada hal-hal lain.
Saya berharap ini akan segera ditangani juga.

AmitMY pada 13 Jul 2017

@AmitMY terima kasih atas jawabannya!!
yup aku juga berharap!! deeplinking akan menjadi masalah dengan perilaku ini bukan?
Apakah ada solusi yang Anda ketahui?

tattivitorino pada 13 Jul 2017

Saya pikir itu bermasalah, dan saya tidak tahu apakah ada solusi

AmitMY pada 13 Jul 2017

Saya akan mulai mengerjakan ini hari ini.

Terima kasih,
Dan

danbucholtz pada 13 Jul 2017

👍18

terima kasih banyak @danbucholtz
Bersulang

tattivitorino pada 13 Jul 2017

@tattivitorino terima kasih, Anda sudah menanyakan ini, saya baru saja memposting hal yang sama di forum https://forum.ionicframework.com/t/url-not-reset-on-ionic-serve-live-reload/98080

rashnk pada 13 Jul 2017

👍1

Ada proses untuk ini?

vellengs pada 16 Jul 2017

Itu diperbaiki dalam peningkatan terbaru,

rashnk pada 16 Jul 2017

@rashnk
Saya memutakhirkan "npm install [email protected] --save --save -exact";
Masih " http://localhost :8100/#/nav/n4/start";

vellengs pada 16 Jul 2017

👍1

ikuti ini http://blog.ionic.io/announcing-ionic-3-5-2/

rashnk pada 16 Jul 2017

Kami mengalami masalah yang sama dengan /nav/n4/

rashnk - apakah Anda mengatakan ini pasti diperbaiki di 3.5.2?

Itu tidak langsung dibahas di posting blog di: http://blog.ionic.io/announcing-ionic-3-5-2/

Apakah ada changelog perbaikan yang dapat kami periksa untuk hal semacam ini di masa mendatang?

Terima kasih :)

dev-manager-uk pada 16 Jul 2017

@dev-manager-uk Ya. Lihat ini: https://github.com/ionic-team/ionic/releases

Sampath-Lokuge pada 16 Jul 2017

👍1

Luarbiasa, terimakasih.

Apakah ada yang perlu kita ubah dalam pengaturan atau kode? Atau seharusnya Just Work™.

dev-manager-uk pada 16 Jul 2017

Masalahnya masih ada di 3.5.2 dan 3.5.3 untuk saya.

informasi ionik

paket global:

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

paket lokal:

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

Sistem:

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 pada 16 Jul 2017

👍1

@rashnk , saya berhasil ditingkatkan. tetapi masalahnya masih tetap ada, bahkan buat proyek baru untuk halaman pemuatan lambat menggunakan versi terakhir;

vellengs pada 17 Jul 2017

Ya. saya salah. URL masih memiliki konten tambahan, tetapi saya sedang mengerjakan chrome dengan ionic serve -l
sepertinya tidak menjadi masalah, periksa tangkapan layar

rashnk pada 17 Jul 2017

Ya, masalahnya adalah url tidak diharapkan.

Perilaku yang diharapkan:
http://localhost :8100/#/login
http://localhost :8100/#/app/perfil

vellengs pada 17 Jul 2017

@danbucholtz Kami menunggu balasan Anda maka saya juga memiliki pola URL yang sama seperti di atas dengan Ionic terbaru 3.5.3

Sampath-Lokuge pada 17 Jul 2017

👍3

Masalah yang sama disini. Setelah memutakhirkan ke 3.5, aplikasi saya yang menggunakan tautan dalam (aplikasi browser yang dihosting di server) tidak berfungsi lagi seperti yang diharapkan karena url ajaib seperti 'nav/n4'.
Sepertinya ionic3.5 mengubah pola navigasi, tapi saya harap akan ada dokumentasi terperinci segera.
Bagaimanapun, terima kasih atas kerja keras tim ionik.

agasbzj pada 18 Jul 2017

Masalah yang sama di sini. Kami sedang mengerjakan aplikasi PWA dan deeplinking sangat penting.

Danielv3 pada 18 Jul 2017

👎1 👍1

Sama disini. Ini menahan rilis bagi kita.

larpo1 pada 18 Jul 2017

👎1

@larpo1 Saya sarankan Anda menurunkan versi jika Anda bisa, tidak ada banyak perubahan selain nav di 3.5.X

AmitMY pada 18 Jul 2017

Halo semua! Dan saat ini sedang berusaha memperpendek URL kami dan menyingkirkan banyak "keajaiban" di dalamnya. Kami berharap ini segera siap.

jgw96 pada 18 Jul 2017

👍11 🎉2

Terima kasih Dan! Terima kasih Justin!
Mereka pada dasarnya hanya perlu berfungsi seperti URL web

Mereka harus bekerja seperti:
https://www.test.com/about

Dari pada:
https://www.test.com/#/nav/n4/about
atau bahkan:
https://www.test.com/#/about

dev-manager-uk pada 18 Jul 2017

👍16 🎉1

Sama disini.

Natanael1234 pada 21 Jul 2017

@dev-manager-uk Mengenai https://www.test.com/#/about itu subjek lain.

Anda menghapusnya dengan mengubah locationStrategy di modul aplikasi:

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

sergiocarneiro pada 24 Jul 2017

👍3

Terima kasih @sergiocarneiro
Saya akan mencobanya!

dev-manager-uk pada 25 Jul 2017

Halo @jgw96
Apakah Anda memiliki kira-kira eta untuk rilis untuk memperbaiki deeplinking?
Terima kasih :-)

dev-manager-uk pada 25 Jul 2017

👍1

Saya harus melakukan downgrade untuk menyamarkan masalah ini:
"npm install [email protected] --save --save -exact"

NiltonMorais pada 26 Jul 2017

Ini akan diterbitkan besok. Komit sudah ada di Github jadi saya akan menutup ini.

Terima kasih,
Dan

danbucholtz pada 26 Jul 2017

👍9 🎉4 ❤1

Ya, akan menyenangkan untuk diperbaiki

kirillgroshkov pada 26 Jul 2017

Saya tidak yakin apakah ini tidak memiliki masalah, tetapi kalian harus menggunakan nightly, 3.5.3-201707251952 , yang memiliki perbaikan ini. Dan jika ada masalah dengan itu, silakan posting masalah sebelum rilis 3.6

AmitMY pada 26 Jul 2017

👍2

Dapat mengonfirmasi $ npm install [email protected] --save --save-exact berfungsi untuk saya. Terima kasih!

Sunting: gunakan 3.6.0

reggaedit pada 26 Jul 2017

👍1

Maaf, kami memiliki masalah yang tidak terduga dan akan dikirim besok. Jika Anda ingin akses awal, periksa npm install ionic-angular@nightly . Jika Anda menggunakan tab dan melihat hal-hal rusak saat disegarkan, ini adalah batasan yang diketahui dari sistem kami yang akan diperbaiki di Ionic 4 dengan sedikit perubahan API. Sementara itu, Anda dapat menggunakan tabUrlPath pada ion-tab untuk menguranginya. Pada dasarnya, jika Anda memiliki tautan dalam segment dan tab dengan name/title , kemungkinan ada kolusi di sini. Selain itu, semuanya bekerja dengan sangat baik sejauh ini.

Terima kasih,
Dan

danbucholtz pada 26 Jul 2017

👍1

@sergiocarneiro Sayangnya, menambahkan pengaturan itu tidak akan menghapus nav/n4 juga tidak akan bisa mendapatkan url itu secara langsung.

glebinsky pada 8 Agu 2017

Dapat mengonfirmasi $ npm install [email protected] --save --save -exact berfungsi untuk saya. Terima kasih!

numerized pada 9 Agu 2017

@numerized Anda dapat menggunakan 3.6.0 sebagai gantinya.

AmitMY pada 9 Agu 2017

Hai,
Saya menggunakan ionic cli v3.9.2 dan saya masih memiliki nav/n4 di bilah url.
Sebenarnya aku bahkan punya
/#/nav/n4/pu/halaman login/nav/n5/pr/halaman pribadi
Karena saya memiliki navigasi publik dan pribadi ...

Saya melewati 3.6.0 jadi tidak yakin apa masalahnya, kecuali itu menyebabkan masalah besar

summerchill pada 12 Sep 2017

Anda perlu menggunakan 3.6.0 ionic angular.

AmitMY pada 12 Sep 2017

Terima kasih AmitMY, sayangnya itu tidak memperbaikinya untuk saya ...

summerchill pada 12 Sep 2017

Apa lagi yang bisa saya lakukan?

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

summerchill pada 12 Sep 2017

Hal yang sama di sini, saya menggunakan [email protected] dan selalu masalah yang sama !!!

lud42 pada 15 Sep 2017

Selain memutakhirkan ionic dan ionic-angular ke yang terbaru, @danbucholtz apakah ada hal lain yang harus dilakukan?
Bagi saya ini berfungsi menggunakan yang terbaru

AmitMY pada 15 Sep 2017

Jadi jika saya menjalankan ionc-angular 3.6.1 dan melakukan:

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

Ini bekerja untuk saya

tskweres pada 18 Sep 2017

👍1

Halo kalian semua! sepertinya banyak yang terjadi dan berubah sejak saya membuat masalah ini! Saya dapat melihat bahwa bagian dari masalah url yang kami miliki sebelumnya telah diperbaiki! Untuk halaman yang tidak berada di dalam sistem tab, semuanya berfungsi dengan baik! tapi tidak demikian dengan tab.

Saya baru saja membuat aplikasi baru dengan beberapa halaman seperti login, signup dll. dan urlnya sempurna untuk itu!
http://localhost :8100/#/login
http://localhost :8100/#/signup

Ketika saya sampai ke halaman tab (saat masuk) itulah yang saya miliki:

http://localhost :8100/#/tabs/tab1/tab1
di sini saya tidak mengatur segmen di IonicPage atau tabUrlPath di ion-tab

http://localhost :8100/#/tabs/tab-1/tab1
di sini saya mengatur tabUrlPath pada tab ion ( )

http://localhost :8100/#/tabs/tab-1/tab-1
di sini saya mengatur keduanya
@IonicHalaman({
segmen: 'tab-1'
})

bagi saya sepertinya tabUrlPath terkait dengan segmen /tab-1 pertama dan segmen IonicPage adalah segmen ke-2!

Apakah ada cara untuk menyingkirkan keduanya? Saya tidak melihat gunanya memiliki kedua segmen! Idealnya adalah: http://localhost :8100/#/tabs/tab-1, bukan?

itu info sistem saya:

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

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

paket global:

cordova (Cordova CLI) : 7.0.1

paket lokal:

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

Sistem:

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 pada 25 Sep 2017

👍3

Jelas menjadi masalah bagi saya juga dengan Ionic 3.9.2. Saya juga menggunakan tab seperti yang lain. Saya akan memberikan info lebih lanjut jika perlu.

Saya mendapatkan url yang terlihat seperti berikut: http://localhost:8100/create/nav/n9/create .

lostdev pada 26 Sep 2017

Saya sepenuhnya setuju dengan @tattivitorino bahwa sebenarnya tidak perlu ada nama tab dan nama halaman di URL. Imo nama tab harus sepenuhnya diganti dengan nama halaman.

Hal lain yang saya perhatikan adalah saya tidak bisa mendapatkan URL dengan parameter yang berfungsi saat menggunakan tab.
Ini tidak berfungsi:
http://127.0.0.1 :8100/#/tabs/docs/documents/063b38ae-8edd-408b-b7fc-a346b1c16a8b
Sementara ini:
http://127.0.0.1 :8100/#/documents/063b38ae-8edd-408b-b7fc-a346b1c16a8b

Halaman yang ingin saya dapatkan memiliki definisi segmen berikut:
segment: "documents/:documentId"

felschr pada 9 Okt 2017

👍1

Baru saja melakukan pemutakhiran sejak komentar saya sebelumnya, menggunakan 3.9.2 dan ditampilkan /nav/n4/ . Adakah pembaruan untuk menghapus ini atau haruskah saya menurunkan versi ke 3.6.0?

EDIT: Abaikan ini, sepertinya itu lebih merupakan masalah dengan package-lock.json saya di npm, memaksa instalasi dari package.json saya dengan npm install --no-shrinkwrap sepertinya melakukan trik dan menginstal dengan benar 3.9.2

reggaedit pada 22 Jan 2018

Saya menjalankan 3.9.2. Masalah tetap ada.

AlexanderBrese pada 21 Feb 2018

👍3

Mengalami masalah ini juga pada 3.9.2.

misalnya: /nav/n5/MasterLogin

TGibsonn pada 31 Mei 2018

Saya membuat ini berfungsi normal dan kemudian mulai membuat jalur /nav/.. menggunakan 3.9.2 juga!

Saya menemukan bahwa masalahnya adalah karena saya memiliki lebih dari satu/switch ion-nav di halaman utama (mencoba menampilkan panel ion-split atau tanpa)

mariohmol pada 10 Jun 2018

🎉1

@mariohmol Itu menyelesaikan masalah bagi saya. Terima kasih telah memasukkan itu.

TGibsonn pada 11 Jun 2018

👍1

Terima kasih untuk masalah ini! Masalah ini sedang dikunci untuk mencegah komentar yang tidak relevan dengan masalah asli. Jika ini masih menjadi masalah dengan versi terbaru Ionic, harap buat masalah baru dan pastikan template terisi penuh.