angular / angular/components

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

Open
#22,021 3 comments 5 reactions 0 assignees View on GitHub
area: material/dialog P3
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

#### 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
https://github.com/angular/components/blob/c34511eec93461596a7febd95fa6a85f6949cdac/src/material/dialog/dialog.ts#L298

#### 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

Contributor guide

Open the contributing guide

Research direction

Run the linked StackBlitz reproduction and inspect src/app/+teacher/components/teacher-page/teacher-page.ts, HomeworkPopupComponent, and the MatDialog entry point linked around dialog.ts line 298. Trace the ViewContainerRef injector through the popup and its child components; done means ContentComponents is available without the exception.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.