¿Cómo causar una pérdida de memoria en una aplicación angular?

¿Qué es la gestión de memoria?

1. Asignación de la memoria necesaria.
2. Trabajar con memoria asignada, realizar operaciones de lectura y escritura.
3. Liberar memoria después de que ya no sea necesaria.

¿Cómo funciona la recolección de basura?

▍ Fase de bandera

▍ Fase de limpieza

Fugas de memoria angular.

@Component({
  selector: 'app-root',
  template: `<app-sub *ngIf="hide"></app-sub>`
})
export class AppComponent {
  hide = false;

  constructor() {
    setInterval(() => this.hide = !this.hide, 50);
  }
}

▍ Escenario # 1: enorme para el bucle

@Component({
  selector:'app-sub',
  // ...
})
export class SubComponent {
  arr = [];

  constructor() {
    for (let i = 0; i < 100000; ++i) {
      this.arr.push(Math.random());
    }
  }
}

▍ Escenario 2: Suscripción de BehaviorSubject

@Component({
    selector:'app-sub',
    // ...
})
export class SubComponent {
  subject = new BehaviorSubject(42);
  
  constructor() {
    this.subject.subscribe(value => {
        const foo = value;
    });
  }
}

▍ Escenario 3: asignar un valor a un campo de clase dentro de una suscripción

@Component({
    selector:'app-sub',
    // ...
})
export class SubComponent {
  subject = new BehaviorSubject(42);
  randomValue = 0;
  
  constructor() {
    this.subject.subscribe(value => {
        this.randomValue = value;
    });
  }
}

Escenarios que usan el servicio

@Injectable({
  providedIn: 'root'
})
export class DummyService {

   some$ = new BehaviorSubject<number>(42);
}

▍ Escenario 4: suscribirse a una secuencia y asignar un valor a una constante local

@Component({
    selector:'app-sub',
    // ...
})
export class SubComponent {
  
  constructor(private dummyService: DummyService) {
    this.dummyService.some$.subscribe(value => {
        const foo = value;
    });
  }
}

▍ Escenario 5: suscribirse a un servicio y asignar un valor a un campo de clase

@Component({
    selector:'app-sub',
    // ...
})
export class SubComponent {
  randomValue = 0;
  
  constructor(private dummyService: DummyService) {
    this.dummyService.some$.subscribe(value => {
        this.randomValue = value;
    });
  }
}

▍ ¿Cuándo ocurrió una pérdida de memoria?

Trabajo de suscripción adecuado

@Component({
  selector:'app-sub',
  // ...
})
export class SubComponent implements OnDestroy {

  private destroy$: Subject<void> = new Subject<void>();
  randomNumber = 0;

  constructor(private dummyService: DummyService) {
      dummyService.some$.pipe(
          takeUntil(this.destroy$)
      ).subscribe(value => this.randomNumber = value);
  }

  ngOnDestroy(): void {
      this.destroy$.next();
      this.destroy$.complete();
  }
}

¿Cómo recordar borrar las suscripciones?

npm install @angular-extensions/lint-rules --save-dev

{
  "extends": [
    "tslint:recommended",
    "@angular-extensions/lint-rules"
  ]
}

Resumen