angular / angular/components

Memory Leak in Injector

Ouverte
#22,292 2 commentaires 2 réactions 0 personnes assignées Voir sur GitHub
area: cdk/overlay needs investigation P3
Langage dominant
TypeScript
Étoiles
25k
Forks
6.8k
Merge moyen
1 j 8 h
PR mergées (30 j)
91

Description

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

Guide de contribution

Ouvrir le guide de contribution

Piste de recherche

Le rapport mentionne AppComponent, MyComponent, OverlayRef, Injector et ComponentPortal ; commencez par reproduire des clics répétés et vérifier les heap snapshots. Suivez le cycle de vie attach/detach de l’overlay et les références de Injector.create, puis confirmez si le tableau injecté est libéré après la fermeture et consignez le résultat dans un test de régression ou un diagnostic documenté.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
angular, typescript
Domaine
frontend
Type d'issue
Bug
Difficulté
4/5
Temps estimé
3-5 jours
Activité
À l'abandon
Clarté
À clarifier
Accessibilité débutants
35/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.