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

[naveedahmed1]

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

[naveedahmed1]

To reproduce the error, lazy load below component in AppModule

import { CommonModule } from '@angular/common';
import { Component, NgModule } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatDialog, MatDialogModule, MatDialogRef } from '@angular/material/dialog';

@Component({
  templateUrl: './my-lazy.component.html'
})
export class MylazyComponent {

  public dialogRef: MatDialogRef<any>;
  public dialogSub: any;

  constructor(public dialog: MatDialog) {

  }
}

@NgModule({
  imports: [
    CommonModule,
    MatButtonModule,
    MatDialogModule
  ],
  declarations: [MylazyComponent]
})
class MyLazyComponentModule {
}

Lazy import the above component in AppModule:

        const { MylazyComponent } = await import('./account/enable-notifications.component');
        const myLazyComponentFactory = this.cfr.resolveComponentFactory(MylazyComponent);
        this.myLazyComponentInstance = this.mylazyContainer.createComponent(myLazyComponentFactory, null, this.injector);

[jelbourn]

@naveedahmed1 any chance you could make a reproduction GitHub repo?

[naveedahmed1]

Thanks @jelbourn , can I add you to a private repo?

[jelbourn]

Sure

[naveedahmed1]

Thank you, I have added you to a private repo, just run ng serve and you will notice the error in the console. In AppComponent, I'm trying to dynamically load the EnableNotificationsComponent. Although the component file contains

@NgModule({
  imports: [
    CommonModule,
    MatButtonModule,
    MatDialogModule
  ],
  declarations: [
    EnableNotificationsComponent
  ]
})
class EnableNotificationsModule { }

its still throwing error 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!

[faradoxuz]

Same problem

[jelbourn]

I went to look today, but the invitation expired. The code you linked does look like it should work, though.