How to use Component in page

Question

I'm trying to add a custom component inside several pages.

• I created my pages : ionic g pages name
• I created my component : ionic g component name

At this point i just try this :

<ion-content>
    <app-menu-button></app-menu-button>
</ion-content>

app-menu-button is component selector

I get this error : 1. If 'app-menu-button' is an Angular component, then verify that it is part of this module.

i try to add, in my app-module file, this :

exports: [
    MenuButtonComponent
  ]

But it does not work.

My goal is to display this component in several page.

Thanks,

Answer 1

If you are using lazy-loading, you have to import your custom component in the page module. For eg: If you want to use your component AppMenuButtonComponent in a page called ExamplePage, you have to import it in the page module.

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { ExamplePage } from './example';
import { AppMenuButtonComponent } from '../../components/appmenubutton/appmenubutton';

@NgModule({
  declarations: [
    ExamplePage,
    AppMenuButtonComponent
  ],
  imports: [
    IonicPageModule.forChild(ExamplePage),

  ],
  exports: [
    ExamplePage,
  ]
})
export class ExamplePageModule {

}

Don't forget to remove your import and declarations from app.module.ts file which was added automatically when you create your custom component.

Answer 2

All components should be declared in the modules like below.

@NgModule({
   declarations: [
      MenuButtonComponent
   ]
})