components: Dialog demo - error No component factory found for

Share some code, make also sure that the component you’re trying to open is defined as entry in your NgModule’s entryComponents: []

SOLVED with lazy loaded module:

i have done this, i have added GenerateApiKeyComponent (dialog component) to delcarations array and in entryComponent array and its working fine. its opening dialog.

 declarations: [
    AdminComponent,
    ProjectsComponent,
    ProjectComponent,
    ProjectDetailsComponent,
    DashboardComponent,
    GenerateApiKeyComponent
  ],
  entryComponents: [
    GenerateApiKeyComponent
  ],
  providers: [ProjectService]
})

export class AdminModule {

}

I did it. Edit my app.module.ts like https://github.com/angular/material2/blob/master/src/demo-app/demo-app-module.ts

entryComponents: [ JazzDialog, ]

and in my component need show dialog, i edit it like https://github.com/angular/material2/tree/master/src/demo-app/dialog.

Also having this issue. Not sure how I’m supposed to get this to work in a lazy-loaded module. If i put the component in the lazy-loaded modules entryComponents array i still get:

No component factory found for xxxComponent. Did you add it to @NgModule.entryComponents

Correct. What @msegers said. Placing components into the entryComponents portion of the NgModule declaration will allow Angular to compile those components into component factories and therefore allow the component resolver to add them to the internal map used for component resolution.

FYI, it has to be the main module, at least for me, it wouldn’t work in a sub-module.

Doing what @imVinayPandya did did not work for me. I’m still getting the No component factory found for <component>. error. Putting declaration and entryComponent definitions into the base AppModule lets it work. So it does seem to be an issue with this project and lazy loaded modules. Declaring components in lazy loaded modules works in https://github.com/ng-bootstrap/ng-bootstrap

I found the goddamn problem. I had a syntax error when importing the dialog component.

The Problem (“.js”): import { DialogComponent } from '../dialog/dialog.component.js';

Solution: import { DialogComponent } from '../dialog/dialog.component';

I’m not even gonna say how much time I spent on this:P

In my case, the problem was that I forgot to add MatDialogModule into the lazy loaded module: import { MatDialogModule } from ‘@angular/material/dialog’; imports: [MatDialogModule]

I’m having the same issue with Angular 5.2.0, with the following setup:

// shared.modules.ts
@NgModule({
    declarations: [
        ModalWrapperComponent,
        GenericModalComponent,
        MessageModalComponent,
        ValidationModalComponent,
    ],
    entryComponents: [
        ModalWrapperComponent,
        GenericModalComponent,
        MessageModalComponent,
        ValidationModalComponent,
    ],
})

This module is then imported into app.module.ts. The weird thing is that ModalWrapperComponent and GenericModalComponent work fine, but MessageModalComponent and ValidationComponent throw the error, and all 4 components are loading by the exact same piece of code:

const contentFactory: ComponentFactory<{}> = this.cfr.resolveComponentFactory(this.config.component);

I debugged it, and the issue is that within CodegenComponentFactoryResolver.resolveComponentFactory, that this line:

var /** @type {?} */ factory = this._factories.get(component);

factory is undefined. Even though, when I look at it in the developer tools, all 4 components are in the list of [[Entries]] in the _factories object.

What worked for me, was specifying the dialog component in declarations, as well as entryComponents

import { MainComponent, DialogComponent } from './my-component';
@NgModule({
  declarations: [
    DialogComponent,
    MainComponent
  ],
  entryComponents: [
        DialogComponent
    ],
})

I would really suggest posting this on stackoverflow as this issue is over a year old this is probably an issue with your setup.

In my case, I was not only missing

entryComponents: [
    MyDialogComponent,
  ],

(see @msegers answer)

but also

import { MaterialModule } from '@angular/material';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
...
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MaterialModule,
   ...
  ],

inside app.module.ts

I also had issues with the error “No component factory”. I tried declaring the component in both the same module as the parent, as well as the AppModule. Same error in both cases.

The demo on material.angular.io declares the dialog component in the same file. Maybe it’s an issue for angular if you declare the component in a separate file, as you would do with any other component.

angular-cli: 1.0.0-beta.26 Angular 2.4.5 Confirmed, you cannot create a Dialog Component in a lazy-loaded module (Router loadChildren string value).

Is this an Angular project issue, or should this material2 issue be re-opened?

There seems to be a bug with angular where entryComponents of lazy loaded modules cannot be accessed by services outside of that module. When the service tries to use the ComponentFactoryResolver the factory will be undefined and throw the error. That’s why when adding it to the app.module’s entryComponents it works flawlessly.

https://github.com/angular/angular/issues/14324

@mamatela Not all heroes wear capes! You are a true savior!

@scozma You’re a lifesaver, that was my issue. As well. I had my component with dialog in a lazy loaded module, in declarations and entryComponents, and the actual issue was not importing matDialog. For the record, it was also necessary to put it in declarations and entryComponents, it just wasn’t enough.

I have the same problem but resolved now. After I generated a new component using “ng generate …” command, and then try dialog.open it, angular throw an error about ‘No component factory found for …’. However, once I appended a route for the component, it works fine.

@wizlif , did you find the solution? I’m having the same issue… adding it to entryComponents and declarations does not work for me.

Hi, @zurfyx , i’m using the “@angular/material”: “^2.0.0-beta.12” and i’m facing the same issue, however MaterialModule is nolonger exported by @angular/material, How can i use your fix for the current @angular/material

Thank you @zurfyx, I had the same problem and I solved it adding the entryComponents tag in the main module.

In case @lozthiensu instructions aren’t 100% for people new to ng2+ and Material 2…

Keep in mind, if you are following the material demo code (as is @lozthiensu ) then your dialogs (JazzDialog, etc.) are individual child components, which means that you’ll need to also add them to your @ngModule.declarations along with the parent component that your child components are residing in. After that, you’ll simply need to add your dialog child component(s) (i.e. JazzDialog) to @ngModule.entryComponents.

If you aren’t familiar with entryComponents and how they differ from regular components I highly recommend spending 2 minutes reading this => https://angular.io/docs/ts/latest/cookbook/ngmodule-faq.html#!#q-entry-component-defined

Props to @lozthiensu for sharing his repo and the @angular team for having legit examples in their repo and thorough docs online. I was struggling with this one for a minute.

@lozthiensu This issue came up again… I worked before without doing this and now with new angular updates this broke again or is this supposed to be intended use.