angular / angular/components

bug(multiple): services provided in root are also provided in NgModules

Aperta
#28,443 1 commento 0 reazioni 0 assegnatari Vedi su GitHub
area: many P3
Lingua principale
TypeScript
Stelle
25k
Fork
6.8k
Merge medio
1g 8h
PR unite (30g)
91

Descrizione

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

I am maintaining an Angular library built on top of Angular Material. Among others, this library includes custom components which are to be opened inside a dialog. Here is what the module of such a component looks like:

```typescript
@NgModule({
declarations: [MyComponent],
imports: [MatDialogModule],
export: [MyComponent],
})
export class MyModule {}
```

For applications which use that component in an NgModule, this works fine. However one of the applications is in the progress of migrating to standalone. After making the component standalone and adding `MyModule` to the `imports`, the unit tests involving the `MatDialog` service opening `MyComponent` failed. After investigation, I found out that the instance injected by the component constructor and the instance injected by `TestBed.inject()` are now two separate ones.

I have confirmed with the Angular core team that this is by design, see https://github.com/angular/angular/issues/53929.

The root cause is that `MatDialogModule` has `MatDialog` in its `providers`: https://github.com/angular/components/blob/b8cf1308571b29622422cd56f7f76b7bbc5ba5b1/src/material/dialog/module.ts#L34

IMHO it should be removed from the providers, as the service is `providedIn: 'root'`.

The `MatSnackBar` has the same issue, there might be more affected services in this repo.

### Reproduction

Repo: https://github.com/json-derulo/ng17-dialog-issue
Steps to reproduce:
1. Run `ng test`

### Expected Behavior

There is only one instance of `MatDialog` and the test case in the repro pass

### Actual Behavior

There are multiple instances of `MatDialog` and the test case in the repro fails

### Environment

Angular CLI: 17.0.10
Node: 18.18.2
Package Manager: npm 9.8.1
OS: darwin x64

Angular: 17.0.9
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1700.10
@angular-devkit/build-angular 17.0.10
@angular-devkit/core 17.0.10
@angular-devkit/schematics 17.0.10
@angular/cdk 17.1.0
@angular/cli 17.0.10
@angular/material 17.1.0
@schematics/angular 17.0.10
rxjs 7.8.1
typescript 5.2.2
zone.js 0.14.3

Guida per i contributori

Apri la guida per i contributori

Direzione di ricerca

Inizia dalla definizione collegata di MatDialogModule in src/material/dialog/module.ts ed esegui ng test nel repository di riproduzione. Verifica come è dichiarato il provider MatDialog e se MatSnackBar o altri servizi interessati seguono lo stesso schema. Il lavoro è completato quando la riproduzione ha una sola istanza di MatDialog e il relativo test passa.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
angular, typescript
Ambito
frontend, testing
Tipo di issue
Bug
Difficoltà
4/5
Tempo stimato
3-5 giorni
Stato di attività
Ferma
Chiarezza
Abbastanza chiara
Idoneità per principianti
35/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.