CODEWITHSUNDEEP
angular
garg10may
garg10may

Reputation: 6179

Angular: ERROR Error: No component factory found

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)

Upvotes: 17

Views: 51739

Answers (5)

Tatyana Molchanova
Tatyana Molchanova

Reputation: 1583

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.

Upvotes: 0

Shashwat Gupta
Shashwat Gupta

Reputation: 5264

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 {
}

Upvotes: 2

programoholic
programoholic

Reputation: 5194

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
]

Upvotes: 33

Prashant Pimpale
Prashant Pimpale

Reputation: 10697

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 ]

Upvotes: 1

joka00
joka00

Reputation: 2537

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.

Upvotes: 3

Related Questions