bug(Dialog): @Inject(MAT_DIALOG_DATA) reference is not getting data in Micro Frontend Architecture

[goyalsunil452]

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

When using Angular's MatDialog in a micro frontend architecture, the @Inject(MAT_DIALOG_DATA) reference is receiving an empty object instead of the expected data. Additionally, dialog.closeAll and other dialog-related functions are not working as expected.

Reproduction

Architecture:

MFE-APP1 app1.component using common-dialog-component (imported common-dialog-comp module in app1.module) MFE-APP2 app2.component using common-dialog-component (imported common-dialog-comp module in app2.module) Library1 common-dialog-component (has its own module) All dependencies related to MatDialog are correctly imported in the respective modules.

Context:

Angular Micro Frontend Architecture Separate applications and shared libraries for common components MatDialog used to open a component from a shared library Data passed correctly when the component is used directly within the application Reproduction Steps:

In the application component, open a dialog with the following code: typescript Copy code let ref = this.dialogService.open(FileUploadPreviewComponent, { data: data, panelClass: 'file-upload-preview-dialog', }); FileUploadPreviewComponent is a component from the shared library where @Inject(MAT_DIALOG_DATA) is used: typescript Copy code constructor(@Inject(MAT_DIALOG_DATA) public data: any) {} Notice that the data object is empty in the FileUploadPreviewComponent.

Expected Behavior

The data object should contain the data passed to the dialog. Functions like dialog.closeAll should work as expected

Actual Behavior

The data object is empty in the FileUploadPreviewComponent. dialog.closeAll and other dialog-related functions are not working

Environment

• Angular: 12.2.16
• CDK/Material: 12.2.13
• Browser(s): Chrome (Version 126.0.6478.114 (Official Build) (64-bit))
• Operating System (e.g. Windows, macOS, Ubuntu): Windows

[crisbeto]

It looks like you're using an old version of Angular and Material. Have you tried updating to the latest?