Hi I have a service for the Angular material dialog, like this:

export class DialogModelService {
  participant: ParticipantInfoDTO;

  constructor(private dialog: MatDialog, route: ActivatedRoute) {
    this.participant = route.snapshot.data['participant'];
  }

  openEcheqSelectorDialog(): Observable<any> {
  const dialogRef =     this.dialog.open(EcheqSelectorComponent, {
      width: '600px',
      maxHeight: 'calc(100vh - 2em)',
      data: {
        participant: console.log('participantIDTest', this.participant)
      }
    });

    return dialogRef.afterClosed();
  }
}

And now I try it to inject in a ponent like this:

export class DetailComponent implements OnInit  {


  @Input() participant: ParticipantInfoDTO;

  constructor(private dialog: MatDialog, route: ActivatedRoute, private dialogModelService:  DialogModelService) {
    this.participant = route.snapshot.data['participant'];
  }

  ngOnInit() {

  }

  openEcheqSelectorDialog(){
    this.dialogModelService.openEcheqSelectorDialog().subscribe(data => console.log(data));
  }
}

and this is the template:

  <button mat-raised-button class="button-spacing" (click)="openEcheqSelectorDialog()" i18n>Send echeq</button>

And I have the ponent declard in this module:

 @NgModule({
      declarations: [ListComponent, DetailComponent, ExtendedSearchComponent, LoaderComponent, ChangeEmailComponent],
      exports: [LoaderComponent, DetailComponent],


export class ParticipantModule {}

But I get this error:

DetailComponent.html:9 ERROR Error: No ponent factory found for EcheqSelectorComponent. Did you add it to @NgModule.entryComponents?
    at noComponentFactoryError (core.js:7754)
    at CodegenComponentFactoryResolver.push../node_modules/@angular/core/fesm5/core.js.CodegenComponentFactoryResolver.resolveComponentFactory (core.js:7792)
    at CdkPortalOutlet.push../node_modules/@angular/cdk/esm5/portal.es5.js.CdkPortalOutlet.attachComponentPortal (portal.es5.js:654)
    at 

So my question is: what I have to change?

Thank you

I have that. I have put them both in the module:

@NgModule({
  declarations: [
    EcheqQuestionComponent,
    EcheqDisplayComponent,
    EcheqViewListComponent,
    EcheqViewItemComponent,
    EcheqSelectorComponent,
    MetaBoxComponent,
    ConfirmDialogComponent,
    StrenumQuestionComponent,
    StrlistQuestionComponent,
    RadioQuestionComponent
  ],
  exports:[
    EcheqSelectorComponent
  ],

  imports: [
    // Angular
    CommonModule,
    FormsModule,

    // Angular Material
    MatDialogModule,
    MatButtonModule,
    MatIconModule,
    MatInputModule,
    MatSortModule,
    MatPaginatorModule,
    MatTableModule,
    MatExpansionModule,
    MatCardModule,
    MatDividerModule,
    MatCheckboxModule,
    MatRadioModule,
    MatSelectModule,

    // Carapax
    AuthModule,
    ParticipantEcheqRoutingModule,
    SharedModule
  ],
  entryComponents: [
    EcheqSelectorComponent,
    ConfirmDialogComponent
  ]
})
export class ParticipantEcheqModule { }

Hi I have a service for the Angular material dialog, like this:

export class DialogModelService {
  participant: ParticipantInfoDTO;

  constructor(private dialog: MatDialog, route: ActivatedRoute) {
    this.participant = route.snapshot.data['participant'];
  }

  openEcheqSelectorDialog(): Observable<any> {
  const dialogRef =     this.dialog.open(EcheqSelectorComponent, {
      width: '600px',
      maxHeight: 'calc(100vh - 2em)',
      data: {
        participant: console.log('participantIDTest', this.participant)
      }
    });

    return dialogRef.afterClosed();
  }
}

And now I try it to inject in a ponent like this:

export class DetailComponent implements OnInit  {


  @Input() participant: ParticipantInfoDTO;

  constructor(private dialog: MatDialog, route: ActivatedRoute, private dialogModelService:  DialogModelService) {
    this.participant = route.snapshot.data['participant'];
  }

  ngOnInit() {

  }

  openEcheqSelectorDialog(){
    this.dialogModelService.openEcheqSelectorDialog().subscribe(data => console.log(data));
  }
}

and this is the template:

  <button mat-raised-button class="button-spacing" (click)="openEcheqSelectorDialog()" i18n>Send echeq</button>

And I have the ponent declard in this module:

 @NgModule({
      declarations: [ListComponent, DetailComponent, ExtendedSearchComponent, LoaderComponent, ChangeEmailComponent],
      exports: [LoaderComponent, DetailComponent],


export class ParticipantModule {}

But I get this error:

DetailComponent.html:9 ERROR Error: No ponent factory found for EcheqSelectorComponent. Did you add it to @NgModule.entryComponents?
    at noComponentFactoryError (core.js:7754)
    at CodegenComponentFactoryResolver.push../node_modules/@angular/core/fesm5/core.js.CodegenComponentFactoryResolver.resolveComponentFactory (core.js:7792)
    at CdkPortalOutlet.push../node_modules/@angular/cdk/esm5/portal.es5.js.CdkPortalOutlet.attachComponentPortal (portal.es5.js:654)
    at 

So my question is: what I have to change?

Thank you

I have that. I have put them both in the module:

@NgModule({
  declarations: [
    EcheqQuestionComponent,
    EcheqDisplayComponent,
    EcheqViewListComponent,
    EcheqViewItemComponent,
    EcheqSelectorComponent,
    MetaBoxComponent,
    ConfirmDialogComponent,
    StrenumQuestionComponent,
    StrlistQuestionComponent,
    RadioQuestionComponent
  ],
  exports:[
    EcheqSelectorComponent
  ],

  imports: [
    // Angular
    CommonModule,
    FormsModule,

    // Angular Material
    MatDialogModule,
    MatButtonModule,
    MatIconModule,
    MatInputModule,
    MatSortModule,
    MatPaginatorModule,
    MatTableModule,
    MatExpansionModule,
    MatCardModule,
    MatDividerModule,
    MatCheckboxModule,
    MatRadioModule,
    MatSelectModule,

    // Carapax
    AuthModule,
    ParticipantEcheqRoutingModule,
    SharedModule
  ],
  entryComponents: [
    EcheqSelectorComponent,
    ConfirmDialogComponent
  ]
})
export class ParticipantEcheqModule { }

• javascript
• angular
• angular-material
• modal-dialog

• Have you tried adding the EcheqSelectorComponent as an entryComponent? – Dino Commented Dec 4, 2019 at 15:26
• Eh, what exactly do you mean? – user12479221 Commented Dec 4, 2019 at 15:29
• Yes, like this: entryComponents: [EcheqSelectorComponent] – user12479221 Commented Dec 4, 2019 at 15:33

2 Answers 2

I think the issue is related where DialogModelService is provided.

To check if that is the issue, try providing the DialogModelService in the ParticipantEcheqModule:

@NgModule({
  declarations: [
    EcheqQuestionComponent,
    EcheqDisplayComponent,
    EcheqViewListComponent,
    EcheqViewItemComponent,
    EcheqSelectorComponent,
    MetaBoxComponent,
    ConfirmDialogComponent,
    StrenumQuestionComponent,
    StrlistQuestionComponent,
    RadioQuestionComponent
  ],
  exports:[
    EcheqSelectorComponent
  ],
  providers: [
    DialogModelService
  ],
  imports: [
    // Angular
    CommonModule,
    FormsModule,

    // Angular Material
    MatDialogModule,
    MatButtonModule,
    MatIconModule,
    MatInputModule,
    MatSortModule,
    MatPaginatorModule,
    MatTableModule,
    MatExpansionModule,
    MatCardModule,
    MatDividerModule,
    MatCheckboxModule,
    MatRadioModule,
    MatSelectModule,

    // Carapax
    AuthModule,
    ParticipantEcheqRoutingModule,
    SharedModule
  ],
  entryComponents: [
    EcheqSelectorComponent,
    ConfirmDialogComponent
  ]
})
export class ParticipantEcheqModule { }

Try adding EcheqSelectorComponent inside module's entryComponents and declarations