Memory leaks in Angular2

Question

What can cause memory leaks in Angular2 (rc5) application? How to prevent them?

Wrong/correct code examples would be much appreciated.

Answer 1

In the browser, Angular is just JavaScript, so the typical caveats apply.

One thing that Angular specifically warns against though is Observables. Once you subscribe to one, it will keep working until you unsubscribe, even if you navigate to another view. Angular unusbscribes for you where possible (eg if you use the async pipe in the template:

model

//listenToServer returns an observable that keeps emitting updates
serverMsgs = httpService.listenToServer();

template

<div>{{serverMsgs | async}}</div>

Angular will show server messages in the div, but end the subscription when you navigate away.

However, if you subscribe yourself, you have to also unsubscribe:

model

msgs$ = httpService.listenToServer().subscribe(
    msg => {this.serverMsgs.push(msg); console.log(msg)}
);

template

<div *ngFor="let msg of serverMsgs">{{msg}}</div>

When you navigate away, even though you cannot see new messages appear in the view, you will see them printed to the console as they arrive. To unsubscribe when the component is disposed of, you would do:

ngOnDestroy(){ this.msgs$.unsubscribe(); }

From the docs:

we must unsubscribe before Angular destroys the component. Failure to do so could create a memory leak.