angular / angular/components

Memory Leak in Injector

Abierto
#22,292 2 comentarios 2 reacciones 0 asignados Ver en GitHub
area: cdk/overlay needs investigation P3
Lenguaje dominante
TypeScript
Estrellas
25k
Forks
6.8k
Merge medio
1 d 8 h
PR fusionados (30 d)
91

Descripción

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

Guía de contribución

Abrir la guía de contribución

Línea de trabajo

El informe menciona AppComponent, MyComponent, OverlayRef, Injector y ComponentPortal; empieza reproduciendo clics repetidos y comprobando los heap snapshots. Rastrea el ciclo de vida de attach/detach del overlay y las referencias de Injector.create; después, confirma si el array inyectado se libera tras el cierre y documenta el resultado en una prueba de regresión o en un diagnóstico documentado.

Escrito por el modelo de indexación a partir del texto del issue.

Evaluación

Stack tecnológico
angular, typescript
Área
frontend
Tipo de issue
Error
Dificultad
4/5
Tiempo estimado
3-5 días
Estado de actividad
Estancado
Claridad
Necesita aclaración
Aptitud para principiantes
35/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.