bug(MatDialog): Tokens from lazy module are not available in another module's popup component
- Lenguaje dominante
- TypeScript
- Estrellas
- 25k
- Forks
- 6.8k
- Merge medio
- 1 d 8 h
- PR fusionados (30 d)
- 91
Descripción
#### 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
Guía de contribución
Línea de trabajo
Ejecuta la reproducción enlazada de StackBlitz e inspecciona src/app/+teacher/components/teacher-page/teacher-page.ts, HomeworkPopupComponent y el punto de entrada de MatDialog enlazado alrededor de la línea 298 de dialog.ts. Sigue el inyector de ViewContainerRef a través del popup y sus componentes secundarios; se considera terminado cuando ContentComponents está disponible sin la excepción.
Escrito por el modelo de indexación a partir del texto del issue.
Evaluación
- Stack tecnológico
- angular, typescript
- Área
- frontend
- Tipo de issue
- Error
- Dificultad
- 4/5
- Tiempo estimado
- 3-5 días
- Estado de actividad
- Estancado
- Claridad
- Bastante claro
- Aptitud para principiantes
- 35/100