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 @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

Answer 2

This issue may occurs when you're using angular 2+ naming conventions, where it's used to be like my-app.component.ts, updating to the ionic 3 naming convention my-app.ts, you'll be able to use the @IonicPage() decorator if you need it.

Answer 3

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

Answer 4

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.

Answer 5

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

Answer 6

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