Angular Material dialog in lazy loaded module

Question

In my Angular app i have a module called MaterialModule that includes the following content:

imports: [
  MatDialogModule,
  ...
],
exports: [
  MatDialogModule,
  ...
]

It is exported in a module called SharedModule :

@NgModule({
  imports: [
    MaterialModule,
    ...
  ],
  exports: [
    MaterialModule,
    ...
  ]
})
export class SharedModule { }

I would like to show a dialog from one of my lazy loaded components, so in my lazy loaded module i import this SharedModule and add the dialog component as an entry component:

@NgModule({
  declarations: [
    MyLazyLoadedComponent,
    MyDialogComponent,
    ...
  ],
  imports: [
    CommonModule,
    SharedModule,
    ...
  ],
  entryComponents: [MyDialogComponent]
})
export class MyLazyLoadedModule { }

But whenever i try to open the dialog from MyLazyLoadedComponent , i get the following error message:

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

Opening dialogs from components that are not lazy loaded works fine.

I'd really appreciate any advice on what could be wrong with my configuration.

Answer 1

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. You need to import MatDialogModule directly in MyLazyLoadedModule .

Angular v6+: if you are using the MatDialog service inside another injectable service and is using the { providedIn: 'root' } option for that service, you'll need to instead provide that service in the providers array of the module where your dialog components are declared.