Ionic-framework: Ionic3.5.0の奇妙なURLの動作「nav / n4」および「tabs / t0 / page」

作成日 2017年07月13日 · 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 ： http://ionicworldwide.herokuapp.com/のいずれかのチャネルを使用してください。

現在の動作：

Ionic3.5.0の奇妙なURLの動作
私のアプリには基本的なインターフェースがあります！ LoginPage、SignupPage ...ログインまたはサインアップ後、タブインターフェイスに移動します。
まず第一に、「nav / n4」はデフォルトの動作ですか？
http：// localhost ：8100 /＃/ nav / n4 / login
http：// localhost ：8100 /＃/ nav / n4 / app / tabs / t0 / perfil / perfil

ionicgでページとタブを作成しました
そして、すべてのページに対して、たとえば次のような名前のセグメントが設定されています。
@IonicPage（{セグメント： 'perfil'}）

予想される行動：

http：// localhost ：8100 /＃/ login
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');
  }

}

その他の情報：

イオン情報:(ターミナル/ 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
「 [email protected] --save--
それはまだ「 http：// localhost ：8100 /＃/ nav / n4 / start」です。

vellengs 2017年07月16日

👍1

このhttp://blog.ionic.io/announcing-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はい。これを参照してください： //github.com/ionic-team/ionic/releases

Sampath-Lokuge 2017年07月16日

👍1

素晴らしいありがとう。

設定やコードで変更する必要があるものはありますか？または、JustWork™である必要があります。

：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にはまだ余分なコンテンツがありますが、私はionicserve-lを使用してChromeに取り組んでいました
問題はないようです。スクリーンショットを確認してください

rashnk 2017年07月17日

はい、問題は予期しないURLです。

予想される行動：
http：// localhost ：8100 /＃/ login
http：// localhost ：8100 /＃/ app / perfil

vellengs 2017年07月17日

@danbucholtz返信をお待ちしておりますので、私も上記と同じURLパターンで最新のIonic 3.5.3

Sampath-Lokuge 2017年07月17日

👍3

ここでも同じ問題があります。 3.5にアップグレードした後、ディープリンクを使用するアプリ（サーバーでホストされているブラウザーアプリ）は、「nav / n4」のような魔法のURLが原因で、期待どおりに機能しなくなりました。
ionic3.5がnavパターンを変更したように見えますが、詳細なドキュメントがまもなく公開されることを願っています。
とにかく、イオンチームの努力に感謝します。

agasbzj 2017年07月18日

ここで同じ問題。私たちはPWAアプリに取り組んでおり、ディープリンクは非常に重要です。

Danielv3 2017年07月18日

👎1 👍1

こっちも一緒。これは私たちのリリースを保留しています。

larpo1 2017年07月18日

👎1

@ larpo1可能であればダウングレードすることをお勧めします

AmitMY 2017年07月18日

皆さんこんにちは！ダンは現在、URLを短縮し、URLに含まれる多くの「魔法」を取り除くことに取り組んでいます。これをすぐに準備できることを願っています。

jgw96 2017年07月18日

👍11 🎉2

ありがとうダン！ジャスティンありがとう！
基本的にはWebURLのように機能する必要があります

それらは次のように機能するはずです：
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--

NiltonMorais 2017年07月26日

これは明日公開されます。コミットはすでにGithubにあるので、これを閉じます。

ありがとう、
ダン

danbucholtz 2017年07月26日

👍9 🎉4 ❤1

はい、修正していただければ幸いです

kirillgroshkov 2017年07月26日

これに問題がないかどうかはわかりませんが、この修正が加えられた夜間の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を少し変更するだけでIonic4で修正されます。一方では、使用することができますtabUrlPathのion-tab 、それを軽減します。基本的に、同じname/titleディープリンクsegmentとtabがある場合、ここで共謀が発生する可能性があります。それ以外は、これまでのところすべてが素晴らしく機能しています。

ありがとう、
ダン

danbucholtz 2017年07月26日

👍1

@sergiocarneiro残念ながら、その設定を追加してもnav/n4は削除されず、そのURLに直接アクセスすることもできません。

glebinsky 2017年08月08日

$ npm install [email protected] --save--

numerized 2017年08月09日

@numerized代わりに3.6.0を使用できます。

AmitMY 2017年08月09日

やあ、
私はioniccli 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日

ここでも同じことです。私は[email protected]を使用していて、常に同じ問題を抱えています。

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 /＃/ login
http：// localhost ：8100 /＃/ signup

（ログイン時に）タブページにアクセスすると、次のようになります。

http：// localhost ：8100 /＃/ tabs / tab1 / tab1
ここでは、IonicPageのセグメントもion-tabのtabUrlPathも設定していません。

http：// localhost ：8100 /＃/ tabs / tab-1 / tab1
ここでは、ion-tabにtabUrlPathを設定します（）

http：// localhost ：8100 /＃/ tabs / tab-1 / tab-1
ここで私は両方を設定します
@IonicPage（{
セグメント：「tab-1」
}）

tabUrlPathは最初の/ tab-1セグメントに関連しており、IonicPageセグメントは2番目のセグメントであるように見えます。

それらのいずれかを取り除く方法はありますか？両方のセグメントを持つことの意味がわかりません！理想は次のとおりです。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

Ionic3.9.2でも間違いなく私にとっての問題です。私も他のタブと同じようにタブを使用しています。必要に応じて詳細をお知らせします。

次のようなURLを取得します： http://localhost:8100/create/nav/n9/create 。

lostdev 2017年09月26日

URLにタブ名とページ名を含める必要がないという

私が気付いたもう一つのことは、タブを使用しているときにパラメータが機能する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"