I have one page that should be loaded inside a modal, this page is child from other page (I think it does not matter, but...) the point is that when I try to create a modal I receive the error below

ERROR Error: Uncaught (in promise): Error: No ponent factory found for TarefasDetalhePage. Did you add it to @NgModule.entryComponents?

But, when I go to my AppModule to put that page into the entryComponents I got this error:

Component TarefasDetalhePage is not part of any NgModule or the module has not been imported into your module.

The call of the modal is on my HomePage.ts:

  async showModal(id){
    const modal = await this.modalController.create({
     ponent: TarefasDetalhePage,
     ponentProps:{
       custom_id: id
     }
    });
    modal.present();
  }

Here's the markup:

    <ion-list *ngIf="interna === true" >
    <ion-item (click)="showModal(tarefa.id)"   routerDirection="forward" detail *ngFor="let tarefa of tarefasInternas" class="in-list item ion-focusable item-label hydrated">
      <ion-label>
        <h2>#{{tarefa.numero}} - {{tarefa.descricao}}</h2>
        <h3>{{tarefa.inicio}} - {{tarefa.fim}}</h3>
        <p>{{tarefaentarios}}</p>
      </ion-label>
    </ion-item>
  </ion-list>

That's my Structure:

Repo on github:

I have one page that should be loaded inside a modal, this page is child from other page (I think it does not matter, but...) the point is that when I try to create a modal I receive the error below

ERROR Error: Uncaught (in promise): Error: No ponent factory found for TarefasDetalhePage. Did you add it to @NgModule.entryComponents?

But, when I go to my AppModule to put that page into the entryComponents I got this error:

Component TarefasDetalhePage is not part of any NgModule or the module has not been imported into your module.

The call of the modal is on my HomePage.ts:

  async showModal(id){
    const modal = await this.modalController.create({
     ponent: TarefasDetalhePage,
     ponentProps:{
       custom_id: id
     }
    });
    modal.present();
  }

Here's the markup:

    <ion-list *ngIf="interna === true" >
    <ion-item (click)="showModal(tarefa.id)"   routerDirection="forward" detail *ngFor="let tarefa of tarefasInternas" class="in-list item ion-focusable item-label hydrated">
      <ion-label>
        <h2>#{{tarefa.numero}} - {{tarefa.descricao}}</h2>
        <h3>{{tarefa.inicio}} - {{tarefa.fim}}</h3>
        <p>{{tarefa.entarios}}</p>
      </ion-label>
    </ion-item>
  </ion-list>

That's my Structure:

Repo on github: https://github./tiagosilveiraa/PManager

• javascript
• angular
• typescript
• ionic-framework

2 Answers 2

For opening a ponent in a modal, you have to add the ponent in the app.module.js as a entryComponent.

Your error message shows that.

You have to edit the NgModule in your tarefas.module.ts. Please add the rest of as needed.

@NgModule({
    imports: [
        MatDialogModule
    ],
    declarations: [
        ComponentName
    ],
    providers: [
        { provide: MAT_DIALOG_DEFAULT_OPTIONS, useValue: { hasBackdrop: true, closeOnNavigation: true } }
    ],
    entryComponents: [
        ComponentName
    ],
    exports: [
        ComponentName
    ],
})

export class Module {

}