bug(multiple): services provided in root are also provided in NgModules
- Ngôn ngữ chính
- TypeScript
- Star
- 25k
- Fork
- 6.8k
- Merge trung bình
- 1 ngày 8 giờ
- Pull request đã merge (30 ngày)
- 91
Mô tả
### 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
Hướng dẫn đóng góp
Hướng nghiên cứu
Bắt đầu với định nghĩa MatDialogModule được liên kết trong src/material/dialog/module.ts và chạy ng test trong repository tái hiện. Kiểm tra cách provider MatDialog được khai báo và liệu MatSnackBar hoặc các service bị ảnh hưởng khác có cùng mẫu hay không. Hoàn tất khi bản tái hiện có một instance MatDialog và bài test của nó chạy thành công.
Do mô hình lập chỉ mục viết ra từ nội dung của issue.
Đánh giá
- Công nghệ
- angular, typescript
- Lĩnh vực
- frontend, testing
- Loại issue
- Lỗi
- Độ khó
- 4/5
- Thời gian dự kiến
- 3-5 ngày
- Mức độ hoạt động
- Đình trệ
- Độ rõ ràng
- Khá rõ ràng
- Mức phù hợp với người mới
- 35/100