Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Providers no longer injected in Components instantiated through MatDialog.open()

See original GitHub issue

Which @angular/* package(s) are the source of the bug?

Don’t known / other

Is this a regression?

Yes

Description

After upgrading from Angular 13.x.x to 14.x.x my services are no longer injected into components opened/instantiated through MatDialog.

MatDialog and TestService is provided in TestComponent. Opening DialogComponent with this.matDialog.open(DialogComponent) from TestComponenent no longer works. This scenario is currently used by us to make sure components in dialogs get the correct scope based on which component opens the dialog.

I couldn’t find any breaking changes in @angular/angular or @angular/material concerning this.

Working example: https://stackblitz.com/edit/angular-13-provider-works

Not working example: https://stackblitz.com/edit/angular-14-provider-bug

Please provide a link to a minimal reproduction of the bug

https://stackblitz.com/edit/angular-14-provider-bug

Please provide the exception or error you saw

Error: R3InjectorError(AppModule)[TestService -> TestService -> TestService]:
NullInjectorError: No provider for TestService!

Please provide the environment you discovered this bug in (run `ng version`)

Not sure how to run this on Stackblitz. Sorry!
Reproduced locally earlier today with latest TypeScript/Node 16.
So should not matter which version.

typescript: ~4.0.2
@angular/animations: 14.0.1
@angular/cdk: 14.0.1
@angular/common: 14.0.1
@angular/compiler: 14.0.1
@angular/core: 14.0.1
@angular/forms: 14.0.1
@angular/material: 14.0.1
@angular/platform-browser: 14.0.1
@angular/platform-browser-dynamic: 14.0.1
@angular/router: 14.0.1
rxjs: 7.5.5
tslib: 2.4.0
zone.js: 0.11.5

Issue Analytics

State:
Created a year ago
Comments:9 (4 by maintainers)

Top GitHub Comments

1reaction

crisbetocommented, Jun 15, 2022

Closing, but it can be reopened if something doesn’t work out. I also want to note that you have the option of passing in a custom injector if you want to provide your own tokens.

1reaction

JoostKcommented, Jun 14, 2022

Transferring to components repo because I suspect this is not caused by the FW, but rather a change in the Material components.

Top Results From Across the Web

Propagating service instance to dialog component not working ...

The MatDialogConfig passed to the MatDialog.open method has a property ... (injected into your host component) and it will work as intended:

Angular Material Dialog: A Complete Example

In this post, we are going to go through a complete example of how to build a custom dialog using the Angular Material...

Dialog | Angular Material

Opens a modal dialog containing the given component. Parameters. component. ComponentType<T>. Type of the component to load into the dialog.

Angular Material Dialog - Javatpoint

let dialogdialogRef = dialog.open(UserProfileComponent, ... Components created by MatDialog can inject MatDialogRef and close the dialog where they are ...

Getting trapped into the Angular DI mechanism - Medium

constructor(private dialog: MatDialog) { }showDialog() { ... The button is used to open another Angular component as a modal dialog: Project.