MatDialog: When using in dynamically loaded component throws error No provider for MatDialog

Reproduction

When using MatDialog in a dynamically loaded component it doesn’t work and throws error No provider for MatDialog.

Steps to reproduce:

1. Follow the instructions in this post (https://medium.com/angular-in-depth/lazy-load-components-in-angular-596357ab05d8 ) to create a dynamically loaded component
2. Add MatDialogModule to the imports array of NGModule for the dynamically loaded component.
3. ng serve and check the error in console.

Expected Behavior

It should work without throwing any error.

Actual Behavior

Throws below error:

zone-evergreen.js:659 Unhandled Promise rejection: R3InjectorError(AppBrowserModule)[MatDialog -> MatDialog -> MatDialog]: 
  NullInjectorError: No provider for MatDialog! ; Zone: <root> ; Task: Promise.then ; Value: NullInjectorError: R3InjectorError(AppBrowserModule)[MatDialog -> MatDialog -> MatDialog]: 
  NullInjectorError: No provider for MatDialog!
    at NullInjector.get (http://localhost:4200/vendor.js:34269:27)
    at R3Injector.get (http://localhost:4200/vendor.js:48199:33)
    at R3Injector.get (http://localhost:4200/vendor.js:48199:33)
    at R3Injector.get (http://localhost:4200/vendor.js:48199:33)
    at NgModuleRef$1.get (http://localhost:4200/vendor.js:65751:33)
    at Object.get (http://localhost:4200/vendor.js:63486:35)
    at getOrCreateInjectable (http://localhost:4200/vendor.js:38115:39)
    at Module.ɵɵdirectiveInject (http://localhost:4200/vendor.js:52134:12)
    at NodeInjectorFactory.MyDynamicallyLoadedComponent_Factory [as factory] 

Environment

• Angular: 10.0.0-next.6 (same behavior in other versions e.g. 9.x)
• CDK/Material: 9.2.3
• Browser(s): Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): Windows

[tc4rdpp]

Hello, any news on this? I am having a similar issue. Thanks.

[devversion]

I’ve created a StackBlitz that shows the issue: https://stackblitz.com/edit/19335-before?file=src/main.ts. Here is an example with fix as per (2): https://stackblitz.com/edit/19335-with-fix?file=src/main.ts

The code responsible for loading the actual module with it’s providers is the following. Disclaimer: Can still be optimized with parallel loading but here it’s sufficient for the example:

async loadComponent() {
  const lazyModule = await import('./app/lazy.module').then(d => d.LazyModule);
  const moduleFactory = this.compiler.compileModuleSync(lazyModule); 
  const moduleInstance = moduleFactory.create(this.injector);
  const lazyComponent = await import('./app/lazy.component').then(d => d.LazyComponent);
  const factory = moduleInstance.componentFactoryResolver
    .resolveComponentFactory(lazyComponent);
  this.vcr.createComponent(factory, 0, this.injector);
}

Closing as this seems to work as expected. Please let us know if this does not work. An issue with an updated StackBlitz would be great. Thanks!