bug(MatDialog): Tokens from lazy module are not available in another module's popup component

[artaommahe]

Reproduction

https://stackblitz.com/edit/angular-material-dialog-token-from-lazy-module?file=src%2Fapp%2F%2Bteacher%2Fcomponents%2Fteacher-page%2Fteacher-page.ts

Steps to reproduce:

1. go to /teacher route
2. click open popup
3. see an exception on ContentComponents token access inside HomeworkPopupComponent

Expected Behavior

MatDialog uses passed ViewContainerRef`s injector as a parent for popup component, so it's expected to have all tokens from such injector available inside popup

components/src/material/dialog/dialog.ts

Line 298 in c34511e

const userInjector = config && config.viewContainerRef && config.viewContainerRef.injector;

Actual Behavior

ERROR
Error: R3InjectorError(AppModule)[InjectionToken ContentComponents -> InjectionToken ContentComponents -> InjectionToken ContentComponents]:
NullInjectorError: No provider for InjectionToken ContentComponents!

ContentComponents token is available from TeacherPageComponent's viewContainerRef.injector.
Also it's available from @SkipSelf() private injector: Injector inside HomeworkPopupComponent. But we can't use this hack because we need this token deep in HomeworkPopupComponent's children.

Environment

• Angular: 11.2.3
• CDK/Material: 11.2.2
• Browser(s): Chrome Version 88.0.4324.182
• Operating System (e.g. Windows, macOS, Ubuntu): Windows 10

[mmalerba]

Sharing injected data across lazy loaded modules is an issue that has come up for a number of our components. We should look into improving this experience either through code changes or better documentation. Some of the other issues discuss workarounds people have used that may be helpful here as well: #12891 #10084 #18970

[LeraAl]

Hello!
Have the same issue on our project with MatDialog.
Can not divide application to modules, viewContainerRef doesn't work as well.
Services, that are injected only to the lazy-loaded module can not be accessible from the Dialog.

[LeraAl]

It seems I found the root cause of the problem.

Component is created with deprecated API.
So, it used the deprecated version of createComponent method with componentFactoryResolver.
https://github.com/angular/components/blob/main/src/cdk/portal/portal-directives.ts#L155

As a result, component is created with componentFactoryResolver connected to the AppModule if it's not explicitly provided.
Is it possible to fix the issue?