Dialog demo - error No component factory found for

[hafquangbaox]

I use https://github.com/angular/material2/blob/master/src/demo-app/dialog/ for my project(create by angular-cli) and get this error.
error_handler.js:45 EXCEPTION: No component factory found for JazzDialogErrorHandler.handleError @ error_handler.js:45next @ application_ref.js:273schedulerFn @ async.js:82SafeSubscriber.__tryOrUnsub @ Subscriber.js:223SafeSubscriber.next @ Subscriber.js:172Subscriber._next @ Subscriber.js:125Subscriber.next @ Subscriber.js:89Subject.next @ Subject.js:55EventEmitter.emit @ async.js:74onError @ ng_zone.js:120onHandleError @ ng_zone_impl.js:64ZoneDelegate.handleError @ zone.js:207Zone.runGuarded @ zone.js:113NgZoneImpl.runInnerGuarded @ ng_zone_impl.js:72NgZone.runGuarded @ ng_zone.js:236outsideHandler @ dom_events.js:26ZoneDelegate.invokeTask @ zone.js:236Zone.runTask @ zone.js:136ZoneTask.invoke @ zone.js:304 error_handler.js:50 ORIGINAL STACKTRACE:ErrorHandler.handleError @ error_handler.js:50next @ application_ref.js:273schedulerFn @ async.js:82SafeSubscriber.__tryOrUnsub @ Subscriber.js:223SafeSubscriber.next @ Subscriber.js:172Subscriber._next @ Subscriber.js:125Subscriber.next @ Subscriber.js:89Subject.next @ Subject.js:55EventEmitter.emit @ async.js:74onError @ ng_zone.js:120onHandleError @ ng_zone_impl.js:64ZoneDelegate.handleError @ zone.js:207Zone.runGuarded @ zone.js:113NgZoneImpl.runInnerGuarded @ ng_zone_impl.js:72NgZone.runGuarded @ ng_zone.js:236outsideHandler @ dom_events.js:26ZoneDelegate.invokeTask @ zone.js:236Zone.runTask @ zone.js:136ZoneTask.invoke @ zone.js:304 error_handler.js:51 Error: No component factory found for JazzDialog at NoComponentFactoryError.Error (native) at NoComponentFactoryError.BaseError [as constructor] (http://localhost:4200/main.bundle.js:7143:34) at new NoComponentFactoryError (http://localhost:4200/main.bundle.js:20178:16) at _NullComponentFactoryResolver.resolveComponentFactory (http://localhost:4200/main.bundle.js:20187:15) at NgModuleInjector.CodegenComponentFactoryResolver.resolveComponentFactory (http://localhost:4200/main.bundle.js:20212:35) at PortalHostDirective.attachComponentPortal (http://localhost:4200/main.bundle.js:33774:63) at MdDialogContainer.attachComponentPortal (http://localhost:4200/main.bundle.js:49832:45) at MdDialog._attachDialogContent (http://localhost:4200/main.bundle.js:70085:42) at MdDialog.open (http://localhost:4200/main.bundle.js:70042:21) at HomeComponent.open (http://localhost:4200/main.bundle.js:77695:38)ErrorHandler.handleError @ error_handler.js:51next @ application_ref.js:273schedulerFn @ async.js:82SafeSubscriber.__tryOrUnsub @ Subscriber.js:223SafeSubscriber.next @ Subscriber.js:172Subscriber._next @ Subscriber.js:125Subscriber.next @ Subscriber.js:89Subject.next @ Subject.js:55EventEmitter.emit @ async.js:74onError @ ng_zone.js:120onHandleError @ ng_zone_impl.js:64ZoneDelegate.handleError @ zone.js:207Zone.runGuarded @ zone.js:113NgZoneImpl.runInnerGuarded @ ng_zone_impl.js:72NgZone.runGuarded @ ng_zone.js:236outsideHandler @ dom_events.js:26ZoneDelegate.invokeTask @ zone.js:236Zone.runTask @ zone.js:136ZoneTask.invoke @ zone.js:304 zone.js:140 Uncaught Error: No component factory found for JazzDialogZone.runTask @ zone.js:140ZoneTask.invoke @ zone.js:304

Who can help me fix it, please

[msegers]

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

[emilio-martinez]

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.

[dfarago]

Same issue here. The code I am trying is essentially the same demo "JazzDialog" at material2/src/demo-app/dialog/ on GitHub.

[dfarago]

We are on RC5. Will this only work with RC-final?

[hafquangbaox]

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.

[dfarago]

That seemed to work! Thanks!

[hafquangbaox]

OK, close it

[PostImpatica]

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

[xtianus79]

@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.

[mark-langer]

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.

[xtianus79]

@lozthiensu you should reopen this issue because there is not clear documentation on this.

[chrissena]

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

[arlowhite]

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?

[imVinayPandya]

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 {

}