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

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

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.

Answer 3

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

now run fine

Answer 4

Using only:

import { IonicPage } from 'ionic-angular';

@IonicPage()

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

Answer 5

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.