Wsrtjtyk

I created a small component which I want to use in some of the pages but I seem to have some problems when including it in more than one lazy load page.

add.button.component.ts

import { Component, Output, EventEmitter } from '@angular/core';



@Component({

  selector: 'add-button',

  template: `

  <ion-buttons end>

    <button ion-button icon-only (click)="navToAdd()">

      <ion-icon name="md-add-circle"></ion-icon>

    </button>

  </ion-buttons>`

})



export class AddButton {

  visible: boolean = true;



  @Output() navigate: EventEmitter<any> = new EventEmitter();



  navToAdd() {

    this.navigate.emit(null)

  }

}

app.modules.ts

    import { BrowserModule } from '@angular/platform-browser';

    import { MyApp } from './app.component';

    import { HomePage } from '../pages/home/home';

    import { TabsPage } from '../pages/tabs/tabs';



@NgModule({

  declarations: [

    MyApp,

    HomePage,

    TabsPage

  ],

  imports: [

    BrowserModule,

    ...

  ],

  bootstrap: [IonicApp],

  entryComponents: [

    MyApp,

    HomePage,

    TabsPage

  ],

  providers: [

    ...

  ]

})

export class AppModule { }

users.module.ts - Just like users.module.ts there are other page modules where I want to use the component just like i use it in users.module.ts below

import { NgModule } from '@angular/core';

import { IonicPageModule } from 'ionic-angular';

import { UsersPage } from './users';

import { AddButton } from '../../components/add-button.component';



@NgModule({

  declarations: [

    UsersPage,

    AddButton

  ],

  imports: [

    IonicPageModule.forChild(UsersPage),

  ],

})

export class UsersPageModule { }

Your AddButton should probably be on a Shared module and then you would be able to use it in multiple places by importing the module

add your AddButton component into exports array of users.module.ts so you can use it in other modules where UsersModule is imported

import { NgModule } from '@angular/core';

import { IonicPageModule } from 'ionic-angular';

import { UsersPage } from './users';

import { AddButton } from '../../components/add-button.component';



@NgModule({

  declarations: [

    UsersPage,

    AddButton

  ],

  imports: [

    IonicPageModule.forChild(UsersPage),

  ],

  exports: [

    AddButton

  ]

})

export class UsersPageModule { }

If you create the component with the ionic cli with ionic g component AddButton it will automatically create a ComponentsModule and your new component in that module.

And to use this component in the other modules you just have to import that module in the modules that you need.

Also in your ComponentModule you should add imports: [IonicModule] in order to be able to use the Ionic Components like ion-buttons

If you think ButtonComponent doesn't fit to be in Shared Module, Make a Individual module for AddButton. Now this new module should declare and export the AddButtonComponent. You should import this new module in whichever child module you want it to be used for. This should not cause any problem. This will also save you from loading all Shared component just for sake of getting AddComponent working.

It's a best practice to create another module for the component if it is being used at multiple places/modules.