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

[PatnamBalaji]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

test.component.ts

import { Component, Inject } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';

@Component({
  selector: 'app-test-dialog',
  template: `<h1>Hello world</h1>`,
})
export class TestDialogComponent {
  constructor(
    public dialogRef: MatDialogRef<TestDialogComponent>,
    @Inject(MAT_DIALOG_DATA) public data: any
  ) {
    // console.log(this.data)
  }
}

webpack.config.ts

plugins: [
    new ModuleFederationPlugin({
      name: 'test',
      library: { type: 'var', name: 'test' },
      filename: 'remoteEntry.js',
      exposes: {
        TestModule: './src/app/feature/test/test.module.ts',
        TestDialogComponent: './src/app/feature/test-dialog/test-dialog.component.ts',
      },
})

app.component.ts

const { TestDialogComponent } = await loadRemoteModule({
      remoteName: 'test',
      remoteEntry: 'http://localhost:4200/remoteEntry.js',
      exposedModule: 'TestModule',
    });
    this.dialog.open(TestDialogComponent, {
      width: '80%',
      data: {
        person: {
          name: 'Simon',
          age: 32,
        },
      },
    });

Reproduction

StackBlitz link:
Steps to reproduce:

1. Create any dialog component and inject (MatDialogRef/MAT_DIALOG_DATA)
2. Expose the component in the webpack.config.ts file
3. Install loadRemoteModule package
4. Load the remoteEntry url and open component using mat-dialog

Expected Behavior

It should work without throwing any error.

Actual Behavior

Throws below error:

vendor.js:115817 ERROR Error: Uncaught (in promise): NullInjectorError: R3InjectorError(AppModule)[MatDialogRef -> MatDialogRef -> MatDialogRef -> MatDialogRef -> MatDialogRef]: 
  NullInjectorError: No provider for MatDialogRef!
NullInjectorError: R3InjectorError(AppModule)[MatDialogRef -> MatDialogRef -> MatDialogRef -> MatDialogRef -> MatDialogRef]: 
  NullInjectorError: No provider for MatDialogRef!
    at NullInjector.get (vendor.js:119280:27)
    at R3Injector.get (vendor.js:119447:33)
    at R3Injector.get (vendor.js:119447:33)
    at R3Injector.get (vendor.js:119447:33)
    at NgModuleRef$1.get (vendor.js:133512:33)
    at R3Injector.get (vendor.js:119447:33)
    at NgModuleRef$1.get (vendor.js:133512:33)
    at R3Injector.get (vendor.js:119447:33)
    at NgModuleRef$1.get (vendor.js:133512:33)
    at Object.get (vendor.js:133226:35)
    at resolvePromise (polyfills.js:212556:31)
    at polyfills.js:212463:17
    at polyfills.js:212479:33
    at asyncGeneratorStep (src_app_feature_app_module_ts-_7c230.js:5645:5)
    at _next (src_app_feature_app_module_ts-_7c230.js:5664:9)
    at _ZoneDelegate.invoke (polyfills.js:211717:26)
    at Object.onInvoke (vendor.js:136853:33)
    at _ZoneDelegate.invoke (polyfills.js:211716:52)
    at Zone.run (polyfills.js:211479:43)
    at polyfills.js:212620:36

Environment

• Angular: 12.2.0
• CDK/Material:12.2.0
• Browser(s):Chrome
• Operating System (e.g. Windows, macOS, Ubuntu):Windows & Chrome

[PatnamBalaji]

Any update on this?

[kebryansg]

I have the same problem, any solution?

[francoisdumaine]

Any solution ?

@kebryansg @PatnamBalaji @mmalerba

I'm facing the same issue.