web-dev-qa-db-ja.com

ページには@IonicPageデコレータがありますが、対応する「NgModule」はありません

Ionicでページナビゲーションに取り組んでいました。 ionic serveを使用した後、次のエラーが表示されました。

The Page with .ts extension has a @IonicPage decorator, but it does not have a corresponding "NgModule"。

誰が私がこのエラーを受け取っているのか説明できますか？.

angularionic-framework
21
devAsh

これは、@IonicPage()デコレータがディープリンク用であるためです。これにより、ionicのディープリンクシステムにページが登録されます。

そのページにディープリンクが必要ない場合は、デコレータを削除できます。

または、そのページをYOURPAGE.module.tsこのコードで：

@NgModule({
  declarations: [
    MyPage
  ],
  imports: [
    IonicPageModule.forChild(MyPage)
  ],
  entryComponents: [
    MyPage
  ]
})

詳細については、 docs をご覧ください。

17
dlcardozo

コンポーネントページから次の属性を削除しました。

<!-- /src/app/pages/{page-name}/{page-name.ts} -->
@IonicPage()

その他ionicサンプルページにはそれさえありません。ionic CLIは時代遅れです（ページコンポーネントを生成するためにそれを使用したと思います） 。

7
Brayden Hancock

ディープリンクを使用する場合は、最初に API doc を読んでください。

次に、ディープリンクのあるページを追加する例を見てみましょう。

これは、srcフォルダー構造です。

-src
 --app
 --assets
 --pages
    --home
       *home.html
       *home.scss
       *home.ts
 --thems
 *some file we not working with them in here

ページを追加するには、アプリフォルダーで次のコマンドを使用します。

$ ionic g page show

showはページ名です。そして今、これは私たちのsrcフォルダ構造です：

-src
 --app
 --assets
 --pages
    --home
       *home.html
       *home.scss
       *home.ts
    --show
       *show.html
       *show.scss
       *show.ts
 --thems
 *some file we not working with them in here

ここで、アプリフォルダーで以下のコマンドを使用してアプリを実行する場合：

$ ionic serve

このようなエラーが発生します：

/path/to/app/src/pages/show/show.tsには@IonicPageデコレーターがありますが、/ path/to/app/src/pages/show/show.moduleに対応する「NgModule」はありません。 ts

これで、show folderにshow.module.tsという名前のファイルを作成する必要があります（エラーが表示されます）。srcフォルダー構造は次のようになります。

-src
     --app
     --assets
     --pages
        --home
           *home.html
           *home.scss
           *home.ts
        --show
           *show.html
           *show.scss
           *show.ts
           *show.module.ts
     --thems
     *some file we not working with them in here

これはshow.module.tsファイルの内容です：

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

import { ShowPage } from './show';

@NgModule({
  declarations: [
    ShowPage
  ],
  imports: [
    IonicPageModule.forChild(ShowPage)
  ],
  entryComponents: [
    ShowPage
  ]
})
export class ShowPageModule {}

できたionic serveを指定してアプリを実行すると、エラーはなくなります。

で新しいページに移動できます

goToMyPage() {
    // go to the ShowPage component
    this.navCtrl.Push('ShowPage');
  }

ナビゲーションについてはドキュメントを参照 。

3
Mr.Sun

Ionic CLIを使用してページを追加する場合

イオン生成ページnewPage

次に、newPage.module.tsファイルを自動的に生成し、newPage.ts内で次のテキスト行を生成します。

@IonicPage（）

さて、newPage.module.tsを削除し、newPage.tsから@IonicPage（）を削除する必要があります

次に、app.module.tsを開き、宣言とエントリコンポーネント内にnewPageを追加します。

1
Yury Euceda

モジュールのファイル名ionicが探しているファイル名と一致することを確認する必要があります。ionicは "home .modules.ts "と私は" home.module.ts "（最後にsがない）を持っていたため、ionicは@NgModuleデコレータを見つけることができませんでした。

1
Adolfo

私の場合、ファイル名は大文字と小文字が区別されませんでした[〜＃〜] n [〜＃〜] ews.ts＆n ews.module.ts

今うまく走ります

1
mohammed rashed

これは、@ IonicPage（）デコレータがディープリンクと遅延読み込みに使用されるためです。したがって、それを実装するには、必要なすべてを読み込むための専用モジュールが必要です。そのページのコンポーネント。 Ionic docs：

@ IonicPage API docs

0
Gabriel C

使用のみ：

import { IonicPage } from 'ionic-angular';

@IonicPage()

@Component({
  selector: 'page-abc',
  templateUrl: 'abc.html',
})
0
user11124624

.tsページで次のコードを追加し、Wordの「名前」をページの名前に置き換えます。 app.module.tsページに新しいページを追加することを忘れないでください。

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

@Component({
selector: 'page-name',
templateUrl: 'name.html',
})

export class NamePage {
   constructor(public navCtrl: NavController) {
  }
}
0
Jamhson

今日、ページを生成するときに同じ問題が発生しました。これは数日前には起こりませんでした。

ページのNgModuleを削除してから、@IonicPage()デコレーターを削除し、機能を復元しました。少しハックですが、今のところ稼働しています...

0
user3934205