17

I have created two components in the same ts file as below. Was referring the example code from https://material.angular.io/components/dialog/examples and it uses the same approach.

import { Component, OnInit, Inject } from '@angular/core';
import { MatDialogModule, MatDialog, MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';


@Component({
  selector: 'app-srapi',
  templateUrl: './srapi.component.html',
  styleUrls: ['./srapi.component.scss']
})
export class SrapiComponent {

  constructor(private dialog: MatDialog) { }

  onCreate(): void {
    const dialogRef = this.dialog.open(SrapiTFLFormComponent);
  }
}

@Component({
  selector: 'app-srapi-tfl-form',
  templateUrl: './srapi-tfl-form.html'
})
export class SrapiTFLFormComponent{

  constructor(public dialogRef: MatDialogRef<SrapiTFLFormComponent>) {}
}

Also declared and imported both of these in app.module.ts

import { SrapiComponent, SrapiTFLFormComponent } from './srapi/srapi.component';

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    HeaderComponent,
    FooterComponent,
    RegisterComponent,
    EdcUserFormComponent,
    SidebarComponent,
    EdcMasterDataComponent,
    SrapiComponent,
    SrapiTFLFormComponent
  ],
  imports: [
    BrowserModule,
.
.

but it gives an error when it opens the dialog.

ERROR Error: No component factory found for SrapiTFLFormComponent. Did you add it to @NgModule.entryComponents? at noComponentFactoryError (core.js:15705)

5 Answers 5

33

in your app.module.ts add below code :

import { SrapiComponent, SrapiTFLFormComponent } from './srapi/srapi.component';

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    HeaderComponent,
    FooterComponent,
    RegisterComponent,
    EdcUserFormComponent,
    SidebarComponent,
    EdcMasterDataComponent,
    SrapiComponent,
    SrapiTFLFormComponent
  ],
  imports: [
    BrowserModule,
.
. 
],
entryComponents: [
   SrapiTFLFormComponent
]
3
  • 1
    just adding SrapiTFLFormComponent worked, need not add SrapiComponent
    – garg10may
    May 31, 2019 at 7:48
  • entryComponents was the solution for me, although I don't have an idea what it does
    – Hrvoje T
    Mar 5, 2020 at 22:24
  • 1
    @HrvojeT you specify components in the entryComponents array when you create them dynamically (eg. from a .ts file) instead of using the selector in a template. With Angular 9 (using Ivy) these are deprecated and no need to add to the entryComponents array.
    – Francesco
    May 28, 2020 at 14:51
3

As the error says you need to add the component also inside of entryComponents.

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    HeaderComponent,
    FooterComponent,
    RegisterComponent,
    EdcUserFormComponent,
    SidebarComponent,
    EdcMasterDataComponent,
    SrapiComponent,
    SrapiTFLFormComponent
  ],
  imports: [
    BrowserModule,
    ...
  ],
 entryComponents: [SrapiTFLFormComponent]
 ...

To clarify what entryComponents are you can take a look here

An entry component is any component that Angular loads imperatively, (which means you’re not referencing it in the template), by type. You specify an entry component by bootstrapping it in an NgModule, or including it in a routing definition.

2

I was facing problem "ERROR Error: No component factory found for Search Food Components.Did you add it to @NgModule.entryComponents?" which shows in below image

enter image description here

Simple Soultion : You need to add SearchFoodModalComponent into entrycomponents in @NgModule

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

import { SearchFoodModalComponent } from "../../modals//searchFood/searchFood.component";
import { InboundComponent } from './inbound/inbound.component'




@NgModule({
    declarations: [InboundComponent,SearchFoodModalComponent],
    imports: [

    ],
    exports: [
        RouterModule
    ],
    providers: [InboundService],
    entryComponents: [SearchFoodModalComponent]
})
export class InBoundFormModule {
}
1

In app.module.ts add SrapiTFLFormComponent in EntryComponent arrays:

as you using this component to be opened as Dialog then you have to add it in EntryComponents array:

An entry component is any component that Angular loads imperatively, (which means you’re not referencing it in the template), by type. You specify an entry component by bootstrapping it in an NgModule, or including it in a routing definition

Like:

entryComponents: [ SrapiTFLFormComponent ]
0

I had a such error when the body of my modal was not init()

modalBody.init()

  • above code was absent so I got a such error as here described, the same. And yes, in Angular 8 it has to be added to declaration and entryComponents.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.