Add genareted page to the side menu of sidemenu project template

I created a project using the sidemenu template.
ionic start projectName sidemenu --v2

after that i generated another page using: ionic g page pageName

what I want to do is to add this generated page to the side menu.

can you please help m, I’m newbie to ionic.

Thanks in advance

Im not sure if i know what you mean.
but in the app.component.ts file you should see an array called
this.pages =[…]

you can add your new page there like this


1 Like

Thank you for this answer you really get me. this is what i’m yalking about
But whenever i i wrote {title=“titlename”, component: “GeneratedPageName”}
i got an error

…/pages/generatedPageName/generatedPageName has no exported member ‘GeneratedPageName’

Any suggestions please

did you import the GeneratedPageName and are you sure it matches the name of the component you’ve imported? And did you add it to your app.module as well?

here is the file:



Okay, and I assume you’re trying to get to the NosAgences page? How does that file look like?

yes for now it’s empty as it is created please see the error I got i posted it as capture above

I ask for the template of the component for a reason. Could you please post it? Since it seems that the name of your generated page doesn’t match what you’re trying to import/

Runtime Error
Unexpected value ‘indefined’ declared by the module ‘AppModule’

Here it is

haha okay thats not what I mean. What I meant was, how does the typescript of your newly compiled file look like?

Aah oka, sorry, image here is the file i didn’t change it as it is generated:

Okay that was my point. Look at the name of the exported class. It’s actually NosAgencesPage, not NosAgences. So change the imported class in your app.module to import { NosAgencesPage } from ‘…/pages/nos-agences/nos-agences/’

and change NosAgences to NosAgencesPage in your declarations and entrycomponents. Make the same changes in your app.component.ts, i.e. change the imported to NosAgencesPage and set it also correct in this.pages = []

you are importing the wrong thing

you are exporting NosAgencesPage

so in the app.module, you must add NosAgencesPage to the declarations and entrycomponents, instead of NosAgences.

the same goes with the app.component.ts, import NosAgencesPage on top, and in the pages array change
the component:NosAgences to component:NosAgencesPage

Thanks a lot @luukschoen this is my mistake. It works now

Thank you @Saidorel for help