Fix MemoryError in Angular in Production

Angular Memory Errors in Production

Angular's change detection runs frequently in production. When components hold large datasets or leak subscriptions, memory usage balloons until the browser tab crashes.

Subscription Leaks

The most common Angular memory issue. Every subscribe() must be cleaned up:

// BAD — subscription lives forever
@Component({ ... })
export class DashboardComponent implements OnInit {
  ngOnInit() {
    this.dataService.getUpdates().subscribe(data => {
      this.items = data;
    });
  }
}

// GOOD — use takeUntilDestroyed or async pipe
@Component({ ... })
export class DashboardComponent {
  items$ = this.dataService.getUpdates();

  constructor(private dataService: DataService) {}
}

<div *ngFor="let item of items$ | async">
  {{ item.name }}
</div>

OnPush Change Detection

Default change detection checks every component on every cycle. Switch to OnPush for data-heavy components:

@Component({
  changeDetection: ChangeDetectionStrategy.OnPush,
  ...
})
export class TableComponent {
  @Input() data: Item[];
}

Virtual Scrolling for Large Lists

import { ScrollingModule } from '@angular/cdk/scrolling';

<cdk-virtual-scroll-viewport itemSize="50">
  <div *cdkVirtualFor="let item of items">
    {{ item.name }}
  </div>
</cdk-virtual-scroll-viewport>

This renders only visible items, reducing DOM nodes from thousands to dozens.

Bugsly captures JavaScript heap size and component lifecycle errors in production Angular apps, helping you identify which components are responsible for memory growth.