web-dev-qa-db-ja.com

遅延読み込みページのランダムエラー：エラーエラー：キャッチされません（約束）：無効なリンク：

私は時々次のエラーに遭遇します。

ERROR Error: Uncaught (in promise): invalid link:MenuPage
    at d (polyfills.js:3)
    at l (polyfills.js:3)
    at Object.reject (polyfills.js:3)
    at NavControllerBase._fireError (nav-controller-base.js:322)
    at NavControllerBase._failed (nav-controller-base.js:310)
    at nav-controller-base.js:365
    at t.invoke (polyfills.js:3)
    at Object.onInvoke (core.es5.js:4125)
    at t.invoke (polyfills.js:3)
    at n.run (polyfills.js:3)
    at polyfills.js:3
    at t.invokeTask (polyfills.js:3)
    at Object.onInvokeTask (core.es5.js:4116)
    at t.invokeTask (polyfills.js:3)
    at n.runTask (polyfills.js:3)

再現する手順を認識しておらず、このエラーはまったく問題を引き起こしていませんアプリは正常に動作しており、メニューページが正しく表示されます。

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

@IonicPage({
  name: "menu",
  segment: "app"
}
)
@Component({
  selector: 'page-menu',
  templateUrl: 'menu.html'
})
export class MenuPage {}

プロジェクトをチェックしましたが、メニューページはそのIonicPage name "menu"。

すでにionic=フォーラム 投稿 がありますが、IonicPageアノテーションに名前を付けることについて提案されている承認済みのソリューションを既にフォローしています。

ionic3
19
Amr ElAdawy

同じことが時々起こることがあります。同様に、エラーが発生するのはまれであるため、エラーの原因を特定できませんでした。 「イオンサーブ」を停止および開始すると問題が解決するため、アプリスクリプトのバグのように見えます。

16
Chris

エラーによると、クラス名MenuPageをディープリンクとして使用しようとしているようです。 this.navCtrl.Push('MenuPage');

_ERROR Error: Uncaught (in promise): invalid link:MenuPage
_

あなたのケースでは、ディープメニューを「メニュー」として宣言しました。したがって、次を使用する必要があります。

_this.navCtrl.Push('menu');
_

または、必要に応じて、クラスを引き続き使用しますが、引用符は付けません：this.navCtrl.Push(MenuPage);

14
Xavier V.

サーバーを再起動すると問題ありません。

11
Alex Onozor

_menu.module.ts_ファイルについて何も言及していないようです。遅延読み込みを設定するには、ページ/コンポーネントごとにモジュールファイルが必要です。

このファイルは必須であるため、Ionicは、ページの初期化時にロードする必要があるコンポーネントを理解できます。ページのモジュールファイルの例を次に示します。

_import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { MenuPage } from './menu.page';
import { SomeComponentModule } from '../../components/some/some.component.module';

@NgModule({
    declarations: [
        MenuPage
    ],
    imports: [
        IonicPageModule.forChild(MenuPage),
        HeaderComponentModule
    ],
    exports: [
        MenuPage
    ]
})
export class MenuPageModule { }
_

このファイルのコンポーネントは単なる例です。したがって、プロジェクトにSomeComponentというコンポーネントがある場合。もちろん、ページでそのコンポーネントを使用している場合にのみ、page.moduleにインポートする必要があります。

SomeComponentには、SomeComponentをSomeComponentModuleとしてエクスポートするモジュールファイルもあり、page.moduleファイルにインポートできます。

インポートにIonicPageModule.forChild(MenuPage)を追加することも必要です。

最後に、コンポーネント/ページごとにモジュールファイルを作成した場合は、_app.module.ts_ファイルからすべてのコンポーネント/ページのインポートを削除できます。

あなたが言及した残りの部分は正しく構成されています。 IonicPage()アノテーションはページごとに必要です。名前を「メニュー」に設定したので、this.navCtrl.Push('menu')を使用してナビゲートできます。

注：モジュールファイルのファイル名がページのファイル名と同じ名前であるが、_.module_が追加されていることを確認してください。たとえば、_menu.ts_ページファイルには、対応する_menu.module.ts_ファイルが必要です。

9
SolveSoul

新しいページ（この場合はMenuPage）を追加した後にサーバーを再起動しなかった場合は、ionic serve。を停止して再起動します。エラーは解決します。

4
Sudarshana Dayananda

MenuPage.ts： MenuMenuクラスにこれを追加します：

@IonicPage(
{
  name: 'tabs-page'
})

app.components.ts

rootPage: string = 'tabs-page';

やってみてください！

2
Ivan Fretes

私は次のようなことをしていたときにこのエラーが発生しました

@ViewChild(Nav) nav: Nav;
...
openPage(page:string) {
  this.nav.setRoot(page);
}

最終的に、渡されたリテラルが無効であるという事実まで追跡しました。名前に小文字ではなくタイプミスや大文字を使用したくないので、このようなことを一元化しました。

結果として、ページの列挙を定義し、それをあらゆる場所で使用しました。

export enum Page {
  HOME = <any>'HomePage',
  LOGIN = <any>'LoginPage'
}

次に、次のようなものを使用しました：

openPage(Page.LOGIN);

私はそれをview-controller.js "ionic-angular"で追跡しました： "3.6.0"

2
JGFMK

同様の問題がありました。 devDependenciesで「@ ionic/app-scripts」をバージョン「2.1.3」に変更することで解決しました。

"devDependencies": {
"@angular/tsc-wrapped": "^4.4.6",
"@ionic/app-scripts": "2.1.3",
"TypeScript": "2.4.0" }
1
De Wet Ellis

私は同じ問題を抱えていたので、miページのアーカイブmodule.tsを作成することでこれを解決できます。この場合、タブでした

import { TabsPage } from './tabs';
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';

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

これが追加された場合にのみ、app.module.tsファイルのimport、declarations、entryComponentsが削除します。このプロセスはすべてうまくいきます。

0
Rodibel Morales

遅延負荷をIonic 3でも調べています。今日は問題があります。このビデオでは、その使用方法を説明しています Ionic 3-Lazy Loading Modules/Routes

@IonicPage（{name： 'name-of-my-page'}）を使用する必要はありません。ビデオの手順に従うだけで完全に機能します。

これがあなたにも役立つことを願っています。

0
Saulo Gomes

コンポーネントの遅延読み込みが必要な場合：

'ionic-angular'からインポートした_@Component_デコレータの上に@IonicPage()デコレータを追加し、作業を保存した後にサーバーを再起動するだけです

例：

_....
import { IonicPage, NavController, NavParams, AlertController } from 'ionic-angular';
....

@IonicPage()
@Component({
templateUrl : '',
})
export class XYZ{
   ........
}
_

App.module.tsファイルに、宣言配列にもインポート配列にも同じページを追加しないでください。

0
ARSHAD MOHAMMED