bug(Dialog): Explicit injector does not work
- Dominant language
- TypeScript
- Stars
- 25k
- Forks
- 6.8k
- Avg merge
- 1d 8h
- Merged PRs (30d)
- 91
Description
### 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
Hey, I recently updated to v14 just for the newly added feature of the Dialog - the explicit injector, but it does not seem to work. I might be doing something wrong or misunderstood the new feature (to provide an `Injector` without having to provide a `ViewContainerRef`).
### Reproduction
Steps to reproduce:
Check out https://stackblitz.com/edit/angular-ozdqwy?file=src%2Fapp%2Fdialog-overview-example.ts (hope this lives long enough)
**OR**
1. Open the dialog example https://stackblitz.com/run?file=src/app/dialog-overview-example.ts
2. Add some service `@Injectable()
export class SomeService {
test = 123;
}`
3. Create an injector `const myInjector = Injector.create({
providers: [{ provide: SomeService }]
});`
4. Pass the injector `injector: myInjector`` to ``this.dialog.open`
5. Require the service `public someService: SomeService` in `DialogOverviewExampleDialog`'s constructor
### Expected Behavior
`SomeService` gets provided to `DialogOverviewExampleDialog`
### Actual Behavior
```
ERROR NullInjectorError: R3InjectorError(AppModule)[SomeService -> SomeService -> SomeService]:
NullInjectorError: No provider for SomeService!
at NullInjector.get (vendor.js:66456:21)
at R3Injector.get (vendor.js:66652:27)
at R3Injector.get (vendor.js:66652:27)
at R3Injector.get (vendor.js:66652:27)
at NgModuleRef.get (vendor.js:81766:29)
at ChainedInjector.get (vendor.js:81534:32)
at lookupTokenUsingModuleInjector (vendor.js:59680:31)
at getOrCreateInjectable (vendor.js:59732:10)
at Module.ɵɵdirectiveInject (vendor.js:67961:10)
at NodeInjectorFactory.DialogOverviewExampleDialog_Factory [as factory] (main.js:153:195)
```
### Environment
Angular CLI: 14.0.5
Angular: 14.0.5
Angular Material: 14.0.4
Node: 16.13.0
Package Manager: npm 8.1.0
OS: win32 x64
### Additional info
I glanced into the source code and I think the injector from the config is taken into account only when creating/attaching the
container:
https://github.com/angular/components/blob/c28bbdeb51c31cbd1f5e06528ef4d21b1650e4a8/src/cdk/dialog/dialog.ts#L224
but not when creating/attaching the actual content component:
https://github.com/angular/components/blob/c28bbdeb51c31cbd1f5e06528ef4d21b1650e4a8/src/cdk/dialog/dialog.ts#L311
and it seems that from a DI point of view, the implementation does not tie the content's Injector with the container's Injector. Again, I might be wrong.
Thanks!
Contributor guide
Research direction
Start with src/cdk/dialog/dialog.ts at the referenced lines 224 and 311, then reproduce the issue using the linked StackBlitz example and its explicit Injector configuration. Done means the SomeService provider supplied through the explicit injector is available to DialogOverviewExampleDialog without the NullInjectorError.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- angular, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100