Page has a @IonicPage decorator, but it does not have a corresponding "NgModule"

Question

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.

Answer 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

Answer 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).

Answer 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.

Answer 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.