angular / angular/components

Memory Leak in Injector

オープン
#22,292 コメント 2 件 リアクション 2 件 担当者 0 名 GitHub で見る
area: cdk/overlay needs investigation P3
主要言語
TypeScript
スター
25k
フォーク
6.8k
平均マージ
1日 8時間
マージ済み PR(30日)
91

説明

I've encountered a possible memory leak while using `OverlayRef` and `Injector`.

#### Reproduction

Inside `AppComponent` there is a click event on a button. That click event will generate an array and pass that array to another component using `ComponentPortal`

The constructor and the click event from `AppComponent`:

```
// ? AppComponent constructor
constructor(private overlay: Overlay) {
this.#overlayRef = this.overlay.create({
positionStrategy: this.overlay
.position()
.global()
.centerHorizontally()
.centerVertically(),
hasBackdrop: true,
});

this.#overlayRef.backdropClick().subscribe(() => this.#overlayRef.detach());
}

onClick(){
const output = new Array(1000).fill('asfasdf');
this.#overlayRef.attach(
new ComponentPortal(
MyComponent,
null,
Injector.create({
providers: [{ provide: MY_TOKEN, useValue: output }],
})
)
);
}
```

#### Actual Behavior

It looks like each time the modal is created the data generated and injected in the component, but once the modal disappears, the data is not removed from the memory.

![1](https://user-images.githubusercontent.com/25796932/111782318-8c5e7b80-88c1-11eb-9797-ef426b18963d.PNG)
![2](https://user-images.githubusercontent.com/25796932/111782313-8b2d4e80-88c1-11eb-96a1-2790a5506f16.PNG)
![3](https://user-images.githubusercontent.com/25796932/111782316-8bc5e500-88c1-11eb-9976-c9184fad91f3.PNG)

#### Environment

- Angular:
- "@angular/core": "~11.2.5",

- CDK/Material:
- "@angular/cdk": "^11.2.4",
- Browser(s): Chrome
- Operating System (e.g. Windows, macOS, Ubuntu): Windows10

コントリビューションガイド

コントリビューションガイドを開く

調査の方向性

レポートでは AppComponent、MyComponent、OverlayRef、Injector、ComponentPortal が挙げられています。まず、繰り返しクリックを再現し、ヒープスナップショットを確認します。overlay の attach/detach ライフサイクルと Injector.create の参照を追跡し、その後、dismissal 後に injected array が解放されるかを確認して、結果を regression test または文書化した診断に記録します。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
angular, typescript
領域
frontend
issue の種類
バグ
難易度
4/5
見積もり時間
3〜5日
活発さ
停滞
明瞭さ
説明が足りない
初心者へのやさしさ
35/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。