Clever Geek Handbook

The page has the @IonicPage decorator, but it doesn't have a corresponding "NgModule"

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 someone explain why I am getting this error.

+13


source to share


9 replies


This is because the decorator @IonicPage()

is for deep linking, this will register the page with the ionic deep linking system .

You can remove the decorator if you don't need deep linking on this page.

Or you can register this page in yours YOURPAGE.module.ts

with this code:



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

More information can be found in the docs

+12


source


I just removed the following attribute from the components page:

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


Other pages with ionic examples don't even have this. It looks like the ionic CLI is outdated (I assume you used it to create the page component).

+6


source


If you want to deep link, read the API doc first

and now let's look at an example of adding a deep anchor page:

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

to add a page use this command in your application folder:

$ ionic g page show

show is the name of the page. 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 start your application with the following command in your application folder:

$ ionic serve

you get an error like this:

/path/to/app/src/pages/show/show.ts has a @IonicPage decorator, but it doesn't have a corresponding "NgModule" in /path/to/app/src/pages/show/show.module.ts

now you should make a file named show.module.ts

(by mistake it says) in the show folder, then our src folder structure should look something 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 the file 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 {}

Done. run the app with ionic serve

and the error is gone.

You can go to a new page with

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

see document for navigation .

+2


source


When you add a page using Ionic CLI like

ionic page generation newPage

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

@IonicPage ()

Well, you should remove newPage.module.ts and remove @IonicPage () from newPage.ts

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

+2


source


You have to make sure that the file name of the ionic module is looking for a match with 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) so ionic couldn't find the @NgModule decoder.

+1


source


I had the same problem today while creating a page. This did not happen a few days ago.

I removed the page NgModule

and then the decorator @IonicPage()

which restored the functionality. A bit hacky, but it works and works for the moment ...

0


source


in my case my file name was not case sensitive. I have N ews.ts and n ews.module.ts

now running fine

0


source


On the .ts page, add the following code, replace the word "name" with whatever you name on your page. Don't forget to add a new page to your 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) {
  }
}
0


source


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

@ IonicPage API docs

0


source






More articles:


All Articles