bug(mat-dialog): MatDialog doesn't have access to providers defined in a route when given a ViewContainerRef

[WoMayr]

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 providing services via a route, MatDialog.open is not able to create a component instance that injects this service

MatDialog.open is called like this

this.matDialog.open(MyServiceConsumerComponent, {
  viewContainerRef: this.viewContainerRef,
});

Structure of the routes and components looks like this:

I did try to debug into MatDialog.open but the created Injectors were all able to get the service. So I don't really know what prevents the dialog component to be created.

It did correctly work, when declaring the Service in the providers-part of the component itself (see comment in my stack-blitz in my-feature.component.ts)

Also I'm not sure if this is an issue of Angular Material, CDK or Angular itself.

Reproduction

StackBlitz link: https://stackblitz.com/edit/angular-standalone-ts-strict-ijt5jr Steps to reproduce:

1. Use standalone components
2. Create a service (MyFeatureService)
3. Create a route with a component (MyFeatureComponent) and define the service in the providers
4. Create a component (MyServiceConsumerComponent) that consumes the service
5. Open a dialog in MyFeatureComponent using matDialog.open(MyServiceConsumerComponent, { viewContainerRef: this.viewContainerRef })

Expected Behavior

The Dialog is able to resolve the requested service

Actual Behavior

The Dialog failes to resolve the service:

ERROR NullInjectorError: R3InjectorError(Environment Injector)[MyFeatureService -> MyFeatureService]: 
  NullInjectorError: No provider for MyFeatureService!
    at NullInjector.get (injector_token.ts:27:5)
    at R3Injector.get (r3_injector.ts:294:90)
    at R3Injector.get (r3_injector.ts:294:90)
    at ChainedInjector.get (component_ref.ts:238:23)
    at lookupTokenUsingModuleInjector (di.ts:372:8)
    at getOrCreateInjectable (di.ts:424:2)
    at Object.ɵɵdirectiveInject (shared.ts:86:5)
    at NodeInjectorFactory.MyServiceConsumerComponent_Factory [as factory] (my-service-consumer.component.ts:8:40)
    at getNodeInjectable (di.ts:661:20)
    at createRootComponent (inherit_definition_feature.ts:43:27)

Environment

• Angular: 17.0.5
• CDK/Material: 17.0.1
• Browser(s): Chrome 119.0.6045.200
• Operating System (e.g. Windows, macOS, Ubuntu): Windows 10