My goal is to create a versatile datepicker component that can be integrated into any project seamlessly.
I have set up an NgModule containing various components, where I inject IonicModule to utilize all the components and directives of Ionic2.
@NgModule({
imports: [
CommonModule,
IonicModule.forRoot(DatePickerModule)
],
exports: [DatePickerComponent, DatePickerDirective],
entryComponents: [DatePickerComponent],
declarations: [DatePickerComponent, DatePickerDirective],
providers: [DateService, nls]
})
export class DatePickerModule {
static forRoot(): ModuleWithProviders {
return {
ngModule: DatePickerModule
};
}
};
One of the components makes use of Ionic modal controller to display a modal.
export class MainDirective{
public static config:any;
constructor(private modalCtrl:ModalController) {
}
openModal() {
this.modalCtrl.create(DatePickerComponent).present();
}
}
This NgModule is then imported into another App, where I attempt to call openModal from that app. This is how I import it:
@NgModule({
imports: [
IonicModule.forRoot(App),
DatePickerModule.forRoot(),
],
})
However, when trying to do so, it results in an error '_getPortal' of undefined from the ionic-angular library. It seems like it cannot locate the app to display on.
I assume I need to pass the actual APP to forRoot for it to work properly, but I am unsure how to achieve this.
What would be the most effective approach to resolving this issue?