angular / angular/components

bug(Dialog): Explicit injector does not work

Offen
#25,262 18 Kommentare 14 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
area: material/dialog P2
Vorherrschende Sprache
TypeScript
Sterne
25k
Forks
6.8k
Ø Merge
1 T. 8 Std.
Gemergte PRs (30 T.)
91

Beschreibung

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

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

Beginne mit src/cdk/dialog/dialog.ts an den referenzierten Zeilen 224 und 311 und reproduziere anschließend das Problem mithilfe des verlinkten StackBlitz-Beispiels und seiner expliziten Injector-Konfiguration. Die Aufgabe ist erledigt, wenn der über den expliziten Injector bereitgestellte SomeService-Provider für DialogOverviewExampleDialog verfügbar ist, ohne dass ein NullInjectorError auftritt.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
angular, typescript
Bereich
frontend
Issue-Typ
Bug
Schwierigkeit
3/5
Geschätzter Aufwand
1-2 Tage
Aktivitätsstatus
Veraltet
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
45/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.