Description
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