Memory Leak in Injector
- Dominant language
- TypeScript
- Stars
- 25k
- Forks
- 6.8k
- Avg merge
- 1d 8h
- Merged PRs (30d)
- 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.



#### 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
Contributor guide
Research direction
The report names AppComponent, MyComponent, OverlayRef, Injector, and ComponentPortal; start by reproducing repeated clicks and checking heap snapshots. Trace the overlay attach/detach lifecycle and Injector.create references, then confirm whether the injected array is released after dismissal and capture the result in a regression test or documented diagnosis.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- angular, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 35/100