Ionic: How do you use the same Modal-component on two different pages?

Question

My modules are set up like this, this is the config I am used to from classic Angular:

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild(routes),
    CreateBookingModule
  ],
  declarations: [PlaceDetailPage],
  entryComponents: [CreateBookingComponent]
})
export class PlaceDetailPageModule {}

@NgModule({
  declarations: [CreateBookingComponent],
  exports: [CreateBookingComponent],
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
  ]
})
export class CreateBookingModule { }

Unfortunately, when inside PlaceDetailPage and activating the Modal which is supposed to render CreateBookingComponent, I get the error:

Error: No component factory found for CreateBookingComponent. Did you add it to @NgModule.entryComponents?

It only works if I have no CreateBookingModule at all and declare the component directly in PlaceDetailPageModule; but then I cannot use it in another component because a Component cannot be declared twice.

If I am not wrong it must add ex. app.module.ts like this: `declarations: [CreateBookingComponent],` and `entryComponents: [CreateBookingComponent]` — Beller, Sep 23 '19 at 16:23
create a common module which exports such components that you need in several modules. Then just import that common module to modules where you need it. — AT82, Sep 23 '19 at 18:26
@Beller when I import it into app.module instead of the respective pages.module, I get runtime errors, that CreateBookingComponent is not part of the module — Phil, Sep 23 '19 at 20:09
@AJT82 CreateBookingModule is a SharedModule. As I said in the OP, the shared module approach doesn't work unfortunately (unless I am doing something wrong) — Phil, Sep 23 '19 at 20:10
https://stackoverflow.com/questions/55305259/how-to-use-component-from-module-in-entrycomponents-another-module — AT82, Sep 24 '19 at 05:17

score 0 · Answer 1 · answered Sep 24 '19 at 18:49

I am closing the question because the problem was that it was a global (providedIn: 'root') service that called ModalController to create a new modal.

I transformed the logic from the service into a directive. A directive always lives inside the parent component so I think this is a good way of making sure that modal problems do not escape into global DOM. Here is the directive code:

@Directive({
  selector: '[appCreateBooking]'
})
export class CreateBookingDirective implements OnInit, OnDestroy {
  @Input() placeToBook$: Observable<Place>;
  private readonly destroy$ = new Subject();

  constructor(
    private modalCtrl: ModalController,
    private actionSheetCtrl: ActionSheetController,
  ) { }

  ngOnDestroy(): void {
    this.destroy$.next();
  }

  ngOnInit(): void {
    this.placeToBook$.pipe(takeUntil(this.destroy$), tap(place => {
      this.actionSheetCtrl.create({
        header: 'Choose an Action',
        buttons: [
          { text: 'Foo', handler: () => this.openBookingModal(place, 'foo') },
          { text: 'Bar', handler: () => this.openBookingModal(place, 'bar') },
          { text: 'Cancel', role: 'destructive' },
        ]
      }).then(el => el.present());
    })).subscribe();
  }

  private openBookingModal(place: Place, mode: PlaceDateSelectMode) {
    this.modalCtrl
      .create({
        // ...
      })
      .then(modal => {
        // ...
      });
  }
}

Ionic: How do you use the same Modal-component on two different pages?

1 Answers1