Ionic-framework: Ionic 3.5.0 이상한 URL 동작 "nav/n4" 및 "tabs/t0/page"

에 만든 2017년 07월 13일 · 53코멘트 · 출처: ionic-team/ionic-framework

Ionic 버전: ("x"로 하나 선택)
[ ] 1.x (Ionic 1.x 문제의 경우 https://github.com/ionic-team/ionic-v1을 사용하세요.)
[ ] 2.x
[x] 3.x

제출 중입니다
[x ] 버그 보고서
[ ] 기능 요청
[ ] 지원 요청 => 여기에 지원 요청을 제출하지 말고 다음 채널 중 하나를 사용하십시오. https://forum.ionicframework.com/ 또는 http://ionicworldwide.herokuapp.com/

현재 행동:

Ionic 3.5.0 이상한 URL 동작
내 앱에는 기본 인터페이스가 있습니다! LoginPage, SignupPage... 로그인 또는 가입 후 탭 인터페이스로 이동합니다. 생각보다 멋진 것은 없습니다!
우선 "nav/n4"가 기본 동작입니까?
http://localhost :8100/#/nav/n4/login
http://localhost :8100/#/nav/n4/app/tabs/t0/perfil/perfil

나는 ionic g로 페이지와 탭을 만들었습니다.
모든 페이지에 대해 다음과 같은 이름으로 세그먼트를 설정했습니다.
@IonicPage({ 세그먼트:'perfil' })

예상되는 동작:

http://localhost :8100/#/로그인
http://localhost :8100/#/app/perfil

재현 단계:

관련 코드:

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 정보: (터미널/cmd 프롬프트에서 ionic info 를 실행하고 출력을 아래에 붙여넣기):

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 에 2017년 07월 13일

👍18

모든 53 댓글

팀은 이것을 알고 있습니다.
마지막으로 확인해보니 다른 것들보다 우선순위가 낮았습니다.
이 문제도 곧 해결되기를 바랍니다.

AmitMY 에 2017년 07월 13일

@AmitMY 답변 감사합니다!!
넵 저도 바랍니다!! 딥링킹이 이 동작에 문제가 될 것이라고 생각하지 않습니까?
알고 있는 해결 방법이 있습니까?

tattivitorino 에 2017년 07월 13일

문제가 있다고 생각하며 해결 방법이 있는지 모르겠습니다.

AmitMY 에 2017년 07월 13일

오늘부터 작업을 시작하겠습니다.

감사 해요,
단

danbucholtz 에 2017년 07월 13일

👍18

@danbucholtz 감사합니다
건배

tattivitorino 에 2017년 07월 13일

@tattivitorino 감사합니다. 이미 질문 https://forum.ionicframework.com/t/url-not-reset-on-ionic-serve-live-reload/98080 에 동일한 내용을 게시했습니다.

rashnk 에 2017년 07월 13일

👍1

이에 대한 프로세스가 있습니까?

vellengs 에 2017년 07월 16일

최신업그레이드로 수정이 되었고,

rashnk 에 2017년 07월 16일

@rashnk
"npm install [email protected] --save --save-exact"를 업그레이드했습니다.
여전히 " http://localhost :8100/#/nav/n4/start"입니다.

vellengs 에 2017년 07월 16일

👍1

http://blog.ionic.io/announceing-ionic-3-5-2/를 따르십시오.

rashnk 에 2017년 07월 16일

/nav/n4/에서 동일한 문제가 발생했습니다.

rashnk - 3.5.2에서 확실히 수정되었다는 말씀이신가요?

블로그 게시물( http://blog.ionic.io/announcing-ionic-3-5-2/) 에서 직접 언급되지 않았습니다.

미래에 이런 종류의 것을 확인할 수 있는 수정 사항의 변경 로그가 있습니까?

감사 해요 :)

dev-manager-uk 에 2017년 07월 16일

@dev-manager-uk 예. 참조 :

Sampath-Lokuge 에 2017년 07월 16일

👍1

좋아 고마워.

설정이나 코드에서 변경해야 할 사항이 있습니까? 아니면 Just Work™여야 합니다.

:NS

dev-manager-uk 에 2017년 07월 16일

이 문제는 여전히 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 에 2017년 07월 16일

👍1

@rashnk , 업그레이드에 성공했습니다. 그러나 문제는 여전히 남아 있으며 마지막 버전을 사용하여 지연 로드 페이지에 대한 새 프로젝트를 생성합니다.

vellengs 에 2017년 07월 17일

예. 내가 틀렸어. URL에는 여전히 추가 내용이 있지만 ionic serve -l을 사용하여 크롬에서 작업하고 있었습니다.
문제가 아닌 것 같으니 스크린샷을 확인하세요.

rashnk 에 2017년 07월 17일

예, 문제는 예상하지 못한 URL입니다.

예상되는 동작:
http://localhost :8100/#/로그인
http://localhost :8100/#/app/perfil

vellengs 에 2017년 07월 17일

@danbucholtz 우리는 당신의 회신을 기다리고 있으므로 나도 최신 Ionic 3.5.3 와 위와 동일한 URL 패턴을 가지고 있습니다

Sampath-Lokuge 에 2017년 07월 17일

👍3

동일한 문제가 있습니다. 3.5로 업그레이드한 후 딥링킹(서버에서 호스팅되는 브라우저 앱)을 사용하는 앱이 'nav/n4'와 같은 마법의 URL로 인해 더 이상 예상대로 작동하지 않았습니다.
ionic3.5가 탐색 패턴을 변경한 것처럼 보이지만 곧 자세한 문서가 있기를 바랍니다.
어쨌든 ionic-team의 노고에 감사드립니다.

agasbzj 에 2017년 07월 18일

동일한 문제가 여기에 있습니다. 우리는 PWA 앱을 개발 중이며 딥링킹은 매우 중요합니다.

Danielv3 에 2017년 07월 18일

👎1 👍1

여기도 마찬가지입니다. 이것은 우리를 위해 릴리스를 보류하고 있습니다.

larpo1 에 2017년 07월 18일

👎1

@larpo1 가능 하면 다운그레이드 하시길 권합니다. 3.5.X에서는 nav 외에는 큰 변화가 없었습니다.

AmitMY 에 2017년 07월 18일

모두들 안녕! Dan은 현재 우리의 URL을 줄이고 그 안에 있는 많은 "마법"을 없애기 위해 노력하고 있습니다. 곧 준비될 수 있기를 바랍니다.

jgw96 에 2017년 07월 18일

👍11 🎉2

고마워 댄! 감사합니다 저스틴!
기본적으로 웹 URL처럼 작동해야 합니다.

다음과 같이 작동해야 합니다.
https://www.test.com/about

대신에:
https://www.test.com/#/nav/n4/about
또는:
https://www.test.com/#/about

dev-manager-uk 에 2017년 07월 18일

👍16 🎉1

여기도 마찬가지입니다.

Natanael1234 에 2017년 07월 21일

@dev-manager-uk https://www.test.com/#/about에 관해서는 다른 주제입니다.

앱 모듈에서 locationStrategy 를 변경하여 제거합니다.

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

sergiocarneiro 에 2017년 07월 24일

👍3

@sergiocarneiro 감사합니다
시도해 볼게요!

dev-manager-uk 에 2017년 07월 25일

안녕하세요 @jgw96
딥링킹을 수정하기 위한 릴리스에 대한 대략적인 예상 시간이 있습니까?
감사 해요 :-)

dev-manager-uk 에 2017년 07월 25일

👍1

이 문제를 위장하기 위해 다운그레이드를 해야 했습니다.
"npm install [email protected] --save --save-exact"

NiltonMorais 에 2017년 07월 26일

이것은 내일 출판될 것입니다. 커밋은 이미 Github에 있으므로 닫겠습니다.

감사 해요,
단

danbucholtz 에 2017년 07월 26일

👍9 🎉4 ❤1

예, 수정하는 것이 좋습니다.

kirillgroshkov 에 2017년 07월 26일

이것이 문제가 없는지 확실하지 않지만 여러분은 이 수정 사항이 있는 nightly, 3.5.3-201707251952 사용해야 합니다. 그리고 문제가 있는 경우 3.6 릴리스 전에 문제를 게시하십시오.

AmitMY 에 2017년 07월 26일

👍2

$ npm install [email protected] --save --save-exact 가 저에게 효과가 있는지 확인할 수 있습니다. 감사 해요!

편집: 3.6.0 사용

reggaedit 에 2017년 07월 26일

👍1

죄송합니다. 예상치 못한 문제가 발생하여 내일 배송됩니다. 사전 체험판을 원하시면 npm install ionic-angular@nightly . 탭을 사용 중이고 새로 고침 시 문제가 발생하는 경우, 이는 약간의 API 변경으로 Ionic 4에서 수정될 시스템의 알려진 제한 사항입니다. 그 동안 tabUrlPath 에 ion-tab 를 사용하여 완화할 수 있습니다. 기본적으로 segment 딥링크와 tab 가 같은 name/title 인 경우 여기에 잠재적으로 공모가 있을 수 있습니다. 그 외에는 모든 것이 지금까지 훌륭하게 작동하고 있습니다.

감사 해요,
단

danbucholtz 에 2017년 07월 26일

👍1

@sergiocarneiro 불행히도 해당 설정을 추가해도 nav/n4 제거되지 않으며 해당 URL에 직접 액세스할 수도 없습니다.

glebinsky 에 2017년 08월 08일

$ npm install [email protected] --save --save-exact가 저에게 맞는지 확인할 수 있습니다. 감사 해요!

numerized 에 2017년 08월 09일

@numerized 대신 3.6.0을 사용할 수 있습니다.

AmitMY 에 2017년 08월 09일

안녕하세요,
저는 ionic cli v3.9.2를 사용 중이고 여전히 URL 표시줄에 nav/n4가 있습니다.
사실 나도 가지고 있다
/#/nav/n4/pu/loginpage/nav/n5/pr/privatepage
나는 공공 및 개인 탐색이 있기 때문에 ...

나는 3.6.0이 지났으므로 엄청난 문제를 일으키는 것을 제외하고 문제가 무엇인지 확실하지 않습니다.

summerchill 에 2017년 09월 12일

3.6.0 이온 각을 사용해야 합니다.

AmitMY 에 2017년 09월 12일

AmitMY에게 감사합니다. 불행히도 문제가 해결되지 않습니다...

summerchill 에 2017년 09월 12일

내가 뭘 더 할 수 있니?

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

summerchill 에 2017년 09월 12일

여기서도 마찬가지입니다. 저는 중이고 항상 같은 문제를 겪고 있습니다!!!

lud42 에 2017년 09월 15일

ionic 및 ionic-angular를 최신으로 업그레이드하는 것 외에 @danbucholtz 가 수행해야 할 다른 작업이 있습니까?
나를 위해 그것은 최신을 사용하여 작동합니다

AmitMY 에 2017년 09월 15일

따라서 ionc-angular 3.6.1을 실행하고 다음을 수행하면

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

그것은 나를 위해 작동합니다

tskweres 에 2017년 09월 18일

👍1

안녕하세요 여러분! 이 문제를 만든 이후로 많은 일이 일어나고 변경된 것 같습니다! 이전에 겪었던 url 문제의 일부가 수정된 것을 볼 수 있습니다! 탭 시스템 내부에 있지 않은 페이지의 경우 모든 것이 잘 작동합니다! 그러나 탭의 경우는 그렇지 않습니다.

방금 로그인, 가입 등과 같은 몇 개의 페이지로 새로운 앱을 만들었습니다. url은 이러한 페이지에 적합합니다!
http://localhost :8100/#/로그인
http://localhost :8100/#/가입

내가 가진 탭 페이지(로그인 시)에 도달하면 다음과 같습니다.

http://localhost :8100/#/tabs/tab1/tab1
여기 IonicPage의 세그먼트나 ion-tab의 tabUrlPath를 설정하지 않았습니다.

http://localhost :8100/#/tabs/tab-1/tab1
여기에서 이온 탭에 tabUrlPath를 설정합니다( )

http://localhost :8100/#/tabs/tab-1/tab-1
여기에서 둘 다 설정합니다
@IonicPage({
세그먼트: '탭-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 에 2017년 09월 25일

👍3

Ionic 3.9.2에서도 확실히 문제가 됩니다. 나도 다른 사람들처럼 탭을 사용하고 있습니다. 필요한 경우 추가 정보를 제공하겠습니다.

http://localhost:8100/create/nav/n9/create 와 같은 URL이 표시됩니다.

lostdev 에 2017년 09월 26일

URL에 탭 이름과 페이지 이름이 필요하지 않다는 @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 에 2017년 10월 09일

👍1

3.9.2를 사용하여 이전 의견 이후로 업그레이드를 수행했으며 /nav/n4/ 표시됩니다. 이 제거에 대한 업데이트가 있습니까? 아니면 3.6.0으로 다운그레이드해야 합니까?

편집 : 이것을 무시하십시오. npm의 내 package-lock.json에 더 많은 문제가 있었던 것 같습니다. npm install --no-shrinkwrap 로 내 package.json에서 강제로 설치하는 것이 트릭을 수행하고 3.9.2를 올바르게 설치하는 것 같습니다.

reggaedit 에 2018년 01월 22일

3.9.2를 실행 중입니다. 문제가 지속됩니다.

AlexanderBrese 에 2018년 02월 21일

👍3

3.9.2에서도 이 문제가 발생합니다.

예: /nav/n5/MasterLogin

TGibsonn 에 2018년 05월 31일

나는 이것을 정상으로 작동시킨 다음 3.9.2도 사용하여 /nav/ 경로를 만들기 시작했습니다!

나는 문제가 메인 페이지에 둘 이상의 스위치 ion-nav 를 가지고 있기 때문이라는 것을 알았습니다.

mariohmol 에 2018년 06월 10일

🎉1

@mariohmol 그것은 나를 위해 문제를 해결했습니다. 포함해주셔서 감사합니다.

TGibsonn 에 2018년 06월 11일

👍1

문제를 주셔서 감사합니다! 이 문제는 원래 문제와 관련이 없는 댓글을 방지하기 위해 잠겨 있습니다. 이것이 여전히 최신 버전의 Ionic에서 문제가 되는 경우 새 문제를 만들고 템플릿이 완전히 채워졌는지 확인하십시오.

ionitron-bot[bot] 에 2018년 09월 01일

이 페이지가 도움이 되었나요?

0 / 5 - 0 등급

Ionic-framework: Ionic 3.5.0 이상한 URL 동작 "nav/n4" 및 "tabs/t0/page"

가장 유용한 댓글

모든 53 댓글

관련 문제