Page has a @IonicPage decorator, but it does not h

问题:

I was working on page navigation in Ionic. After using ionic serve, I got this error:

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

Can anyone explain why I am getting this error.

回答1:

This is because the @IonicPage() decorator is for deep linking, this will register the page in ionic's deep link system.

You can remove the decorator if you don't want deep link on that page.

Or you can register that page in your YOURPAGE.module.ts with this code:

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

You can find more information in the docs

回答2:

I just removed the following attribute from the component page:

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

Other ionic example pages don't even have it. Seems like the ionic CLI is outdated (I'm guessing you used that to generate the page component).

回答3:

If you want to use deep linking first read the API doc

and now let look at an example for adding a page with deep linking:

This is our src folder structure :

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

for adding a page use this command in your app folder :

$ ionic g page show 

show is page name. and now this is our src folder structure :

-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

If now you run your app with below command in your app folder:

$ ionic serve

you get error like this :

/path/to/app/src/pages/show/show.ts has a @IonicPage decorator, but it does not have a corresponding "NgModule" at /path/to/app/src/pages/show/show.module.ts

now you should make file named show.module.ts (in error it says) in show folder then our src folder structure should be like this :

-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

and this is the content of show.module.ts file :

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 {}

Done. run your app with ionic serve and the error is gone.

You can navigate to your new page with

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

see doc for navigation.

回答4:

You have to make sure the module file name ionic is looking for matches the file name you have. I had the same problem because ionic was looking for "home.modules.ts" and I had "home.module.ts" (no s at the end), therefore ionic couldn't find the @NgModule decorator.

回答5:

in my case my file name was not in case sensitive i have News.ts & news.module.ts

now run fine

回答6:

When you add a page using Ionic CLI for example

ionic generate page newPage

then it automatically generates file newPage.module.ts and inside newPage.ts it generates a line of text as

@IonicPage()

Well, you must delete newPage.module.ts and delete @IonicPage() from newPage.ts

then open app.module.ts and add newPage inside declarations and entry components.

回答7:

In your .ts page add the following code, replace the word 'name' with whatever you name your page. Don't forget to add your new page in the app.module.ts page.

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

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

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

回答8:

This is because @IonicPage() decorator is utilized for deep linking and lazy loading, so to implement that, you need a dedicated module to load all the required components for that page. Take a look at the Ionic docs:

@IonicPage API docs

回答9:

Today I had the same issue when generating a page. This didn't happen a few days ago.

I deleted the page's NgModule and then the @IonicPage() decorator, which restored functionality. A bit hacky, but it's up and running for now...

回答10:

Using only:

import { IonicPage } from 'ionic-angular';

@IonicPage()

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