Ionic 3 - ディープリンク - URLが表示されない

Question

@Pageデコレータを使用して新しいディープリンクシステムを使用しようとしています。

私はすべてが正しく設定されていると思いますが（コンソールにエラーは表示されません）、URLは表示されません。ここに私のコードは

app.module.ts

import { NgModule, ErrorHandler } from '@angular/core'; 
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular'; 
import { MyApp } from './app.component'; 
import { HomePageModule } from '../pages/home/home.module'; 
import { JobsPageModule } from '../pages/jobs/jobs.module'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { HttpModule } from '@angular/http'; 
import { SplashScreen } from '@ionic-native/splash-screen'; 
import { StatusBar } from '@ionic-native/status-bar'; 

@NgModule({ 
    declarations: [ 
    MyApp 
    ], 
    imports: [ 
    BrowserModule, 
    HttpModule, 
    HomePageModule, 
    JobsPageModule, 
    IonicModule.forRoot(MyApp) 
    ], 
    bootstrap: [IonicApp], 
    entryComponents: [ 
    MyApp 
    ], 
    providers: [ 
    {provide: ErrorHandler, useClass: IonicErrorHandler}, 
    SplashScreen, 
    StatusBar 
    ] 
}) 
export class AppModule {} 

home.component.ts

import { Component } from '@angular/core'; 
import { NavController, IonicPage } from 'ionic-angular'; 

@IonicPage({ 
    name: 'home', 
    segment: 'home' 
}) 
@Component({ 
    selector: 'page-home', 
    templateUrl: 'home.html' 
}) 
export class HomePage { 

    constructor(public navCtrl: NavController) { 

    } 


} 

home.module.ts

{ 
    "name": "ionic-hello-world", 
    "author": "Ionic Framework", 
    "version": "1.0.0", 
    "homepage": "http://ionicframework.com/", 
    "private": true, 
    "scripts": { 
    "clean": "ionic-app-scripts clean", 
    "build": "ionic-app-scripts build", 
    "ionic:build": "ionic-app-scripts build", 
    "ionic:serve": "ionic-app-scripts serve" 
    }, 
    "dependencies": { 
    "@angular/common": "4.0.0", 
    "@angular/compiler": "4.0.0", 
    "@angular/compiler-cli": "4.0.0", 
    "@angular/core": "4.0.0", 
    "@angular/forms": "4.0.0", 
    "@angular/http": "4.0.0", 
    "@angular/platform-browser": "4.0.0", 
    "@angular/platform-browser-dynamic": "4.0.0", 
    "@ionic-native/core": "3.4.2", 
    "@ionic-native/splash-screen": "3.4.2", 
    "@ionic-native/status-bar": "3.4.2", 
    "@ionic/storage": "2.0.1", 
    "cors": "^2.8.3", 
    "ionic-angular": "3.0.1", 
    "ionicons": "3.0.0", 
    "rxjs": "5.1.1", 
    "sw-toolbox": "3.4.0", 
    "zone.js": "^0.8.4" 
    }, 
    "devDependencies": { 
    "@ionic/app-scripts": "1.3.0", 
    "@ionic/cli-plugin-cordova": "0.0.12", 
    "@ionic/cli-plugin-ionic-angular": "0.0.6", 
    "typescript": "~2.2.1" 
    }, 
    "cordovaPlugins": [ 
    "cordova-plugin-whitelist", 
    "cordova-plugin-console", 
    "cordova-plugin-statusbar", 
    "cordova-plugin-device", 
    "cordova-plugin-splashscreen", 
    "ionic-plugin-keyboard" 
    ], 
    "cordovaPlatforms": [ 
    "ios", 
    { 
     "platform": "ios", 
     "version": "", 
     "locator": "ios" 
    } 
    ], 
    "description": "someProject: An Ionic project" 
} 

package.json

import { NgModule } from '@angular/core'; 
import { IonicPageModule } from 'ionic-angular'; 
import { HomePage } from './home'; 

@NgModule({ 
    declarations: [ 
    HomePage, 
    ], 
    imports: [ 
    IonicPageModule.forChild(HomePage), 
    ], 
    exports: [ 
    HomePage 
    ] 
}) 
export class HomePageModule {} 

です

アドバイスは素晴らしいでしょう。

UPDATE：

URLを持っているように見えるこのリンク

https://github.com/fundo90/ionic2-starter-mobile/tree/b53023d99e78e7b2b56ff4345555656b2de743b7/src

を発見しました。しかし、わからない、彼はあなたのhome.module.tsとjobs.module.tsであるため、モジュール

Answer 1

import { HomePageModule } from '../pages/home/home.module'; 
import { JobsPageModule } from '../pages/jobs/jobs.module'; 

あなたは、これらの2つのページをインポートする必要はありませんをインポートする方法のように、すでに輸入を定義しました。それらを削除すると役立つかどうかを確認してください。

Answer 2

[OK]をどけがとてもだから、次のチュートリアル

http://masteringionic2.com/blog/2017-04-14-lazy-loading-and-deep-linking-with-ionic-3/

からそれを考え出し、app.component.tsに次のインポート

import { HomePage } from '../pages/home/home'; 

そして、ルートを設定削除する必要がありますページでは、イオンページデコレータを使用して作成した名前を使用します。つまり、

@IonicPage({ 
    name: 'home', 
    segment: 'home' 
}) 

この

import { Component } from '@angular/core'; 
import { Platform } from 'ionic-angular'; 
import { SplashScreen } from '@ionic-native/splash-screen'; 
import { StatusBar } from '@ionic-native/status-bar'; 


    @Component({ 
     templateUrl: 'app.html' 
    }) 
    export class MyApp { 
     rootPage:any = 'home'; 

     constructor(
     platform: Platform, 
     private splashScreen: SplashScreen, 
     private statusBar: StatusBar 
     ) { 
     platform.ready().then(() => { 
      // Okay, so the platform is ready and our plugins are available. 
      // Here you can do any higher level native things you might need. 
      this.statusBar.styleDefault(); 
      this.splashScreen.hide(); 
     }); 
     } 
    } 

のようになります。そして、私は上記の私の質問に行ったように、我々はモジュールをインポートする必要はありません0

のでapp.component。だからapp.moudule.tsは次のようになります

import { NgModule, ErrorHandler } from '@angular/core'; 
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular'; 
import { MyApp } from './app.component'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { HttpModule } from '@angular/http'; 
import { SplashScreen } from '@ionic-native/splash-screen'; 
import { StatusBar } from '@ionic-native/status-bar'; 

@NgModule({ 
    declarations: [ 
    MyApp 
    ], 
    imports: [ 
    BrowserModule, 
    HttpModule, 
    IonicModule.forRoot(MyApp) 
    ], 
    bootstrap: [IonicApp], 
    entryComponents: [ 
    MyApp 
    ], 
    providers: [ 
    {provide: ErrorHandler, useClass: IonicErrorHandler}, 
    SplashScreen, 
    StatusBar 
    ] 
}) 
export class AppModule {} 

誰かを助ける希望！

Answer 3

私の場合、問題を引き起こしているページにメニューがあります。私はちょうどapp.htmlにメニューを移動し、それは動作します。