05/04/2024, 22:57 How to Fix Memory Leaks | Better Programming

This member-only story is on us. Upgrade to access all of Medium.

Member-only story

WEB PERFORMANCE

How to Detect and Fix Memory Leaks With

Chrome DevTools
Ready to improve your web performance?

Rakia Ben Sassi · Follow

Published in Better Programming
11 min read · Mar 13, 2020

Listen Share More

Performance timeline record: before and after memory leak fix (animation created by author)

If you prefer to watch, you can check my video course on Udemy: How to Identify,
Diagnose, and Fix Memory Leaks in Web Apps.

https://betterprogramming.pub/build-me-an-angular-app-with-memory-leaks-please-36302184e658 1/41
05/04/2024, 22:57 How to Fix Memory Leaks | Better Programming

In the last year, my team assigned me a task about fixing a performance problem in
one of our Angular apps. At that moment, I was scared. I felt like I was being
punished by that task.

A big part of the target app was written by me, but I didn’t know what I should do to
fix it. The app was running smoothly at the beginning, but after adding new features
— like inline edit for an Angular material table — it was running slower and slower
and took a long time to load that the end-user was totally unhappy with it.

Armed with some knowledge learned from Addy Osmani’s tutorials, I started my
mission.

In the beginning, I was struggling. The performance was so bad that even
Lighthouse could not start running with it. I got an error with Lighthouse caused by
the very long First Contentful Paint (FCP) and Time To Interactive (TTI), but after a
few days, my enthusiasm increased as I’d seen an improvement in the result of
Lighthouse Audit and Chrome DevTools performance analysis.

Performance tuning Journey: before and after improvement

Yes, I did it. I even got very positive, encouraging feedback from the team and
stakeholders after presenting what I did to achieve this outcome from the
performance-tuning journey.

A few weeks later, a second Angular app, that my team was taking care of, started
suffering from a similar problem but with different symptoms.

The end-users were not frustrated about the load time, but after a long session of
working with the application, they realized it became slower, sluggish, and appeared

https://betterprogramming.pub/build-me-an-angular-app-with-memory-leaks-please-36302184e658 2/41
05/04/2024, 22:57 How to Fix Memory Leaks | Better Programming

to pause frequently. This time, I was not scared, but I was curious about the reason
causing the problem.

After some investigation, it turned out that the culprit was a memory leak.

Talk is cheap. Let’s create some code and see how we can produce a web app
suffering from memory leaks that damage the performance and push the users to
hate it. Here is what our sample application for today will look like:

Angular todos management app (animation created by author)

Table of Contents
Project Setup
Code
Time for Heap Snapshot
New Feature Request
Performance Timeline Record
Identify JS Heap Memory Leaks
We’ve Got a Leak — How Do We Fix It?
∘ Action 1: unsubscribing
∘ Action 2: onlySelf & emitEvent
∘ Have we fixed it?
∘ Action 3: OnPush ChangeDetection
∘ Action 4: Angular pipe & minimize subscriptions
What’s the Difference?
Conclusion

https://betterprogramming.pub/build-me-an-angular-app-with-memory-leaks-please-36302184e658 3/41
05/04/2024, 22:57 How to Fix Memory Leaks | Better Programming

Project Setup
You know the drill. Fire up your terminal, run the command ng new , and provide
the name apngular-memory-leaks to create the application:

ng new angular-memory-leaks
cd angular-memory-leaks

The ng new command prompts you for information about features to include in the
initial app. You can accept the defaults by pressing the Enter or Return key.

Code
Alright, time for the good stuff. We have to follow the next steps.

Install Angular Material and Angular Flex Layout:

npm install @angular/material

npm install @angular/cdk
npm install hammerjs
npm install @angular/flex-layout

Import Angular theme by adding this line to src/style.scss :

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

Generate two new components, todo-list and todo-dialog :

ng generate component todo-list

ng generate component todo-dialog

Update app.module.ts :

https://betterprogramming.pub/build-me-an-angular-app-with-memory-leaks-please-36302184e658 4/41
05/04/2024, 22:57 How to Fix Memory Leaks | Better Programming

1 @NgModule({
2 declarations: [ AppComponent, TodoListComponent, TodoDialog ],
3 imports: [
4 BrowserModule,
5 BrowserAnimationsModule,
6 ReactiveFormsModule,
7 RouterModule.forRoot([{path: '', component: TodoListComponent}]),
8 MatListModule,
9 MatButtonModule,
10 MatCardModule,
11 MatDialogModule,
12 MatFormFieldModule,
13 MatTooltipModule,
14 FlexModule,
15 MatInputModule,
16 MatSelectModule
17 ],
18 providers: [],
19 bootstrap: [AppComponent]
20 })
21 export class AppModule {}

app.module.ts hosted with ❤ by GitHub view raw

app.module.ts

Replace the content of app.component.html with the following:

1 <div class="container">
2 <router-outlet></router-outlet>
3 </div>

app.component.html hosted with ❤ by GitHub Open in app view raw

app.component.html
Search

And this is what todo-list.component.html is looking like:

https://betterprogramming.pub/build-me-an-angular-app-with-memory-leaks-please-36302184e658 5/41
05/04/2024, 22:57 How to Fix Memory Leaks | Better Programming

1 <div class="todo-list">
2 <div fxLayout="row wrap" fxLayoutGap="10px">
3
4 <mat-card class="todo-card" *ngFor="let todo of todoList" fxFlex [class.mat-elevati
5 <mat-card-header>
6 <div mat-card-avatar class="example-header-image"></div>
7 <mat-card-title>{{todo.id}} - {{todo.name}}</mat-card-title>
8 <mat-card-subtitle>Type: {{todo.type}}</mat-card-subtitle>
9 </mat-card-header>
10 <mat-card-content>
11 <p>{{todo.description}}</p>
12 </mat-card-content>
13 <mat-card-actions>
14 <div fxLayoutAlign="space-between">
15 <div *ngIf="!todo.dependencies"></div>
16 <div *ngIf="todo.dependencies" class="dependencies" fxLayout="row" fxLayoutGa
17 <i class="material-icons">all_inclusive</i>
18 <div>{{todo.dependencies.name}}</div>
19 </div>
20 <div>
21 <button mat-icon-button color="primary" (click)="updateTodo(todo)" matToolt
22 <i class="material-icons">edit</i>
23 </button>
24 <button mat-icon-button color="primary" (click)="deleteTodo(todo.id)" matTo
25 <i class="material-icons">delete_outline</i>
26 </button>
27 </div>
28 </div>
29 </mat-card-actions>
30 </mat-card>
31 </div>
32 <div fxLayout="row" fxLayoutAlign="end center">
33 <button mat-icon-button color="primary" (click)="createTodo()" matTooltip="Add TODO
34 <i class="material-icons">add_circle</i>
35 </button>
36 </div>
37 </div>

todo-list.component.html hosted with ❤ by GitHub view raw

todo-list.component.html

todo-list.component.css:

https://betterprogramming.pub/build-me-an-angular-app-with-memory-leaks-please-36302184e658 6/41
05/04/2024, 22:57 How to Fix Memory Leaks | Better Programming

todo-list.component.css

todo-list.component.ts:

https://betterprogramming.pub/build-me-an-angular-app-with-memory-leaks-please-36302184e658 7/41
05/04/2024, 22:57 How to Fix Memory Leaks | Better Programming

todo-list.component.ts

todo.dialog.html:

https://betterprogramming.pub/build-me-an-angular-app-with-memory-leaks-please-36302184e658 8/41
05/04/2024, 22:57 How to Fix Memory Leaks | Better Programming

todo.dialog.html

todo.dialog.ts:

https://betterprogramming.pub/build-me-an-angular-app-with-memory-leaks-please-36302184e658 9/41
05/04/2024, 22:57 How to Fix Memory Leaks | Better Programming

todo.dialog.ts

As you have noticed, todo-list.component.ts and todo.dialog.ts are using

todo.service.ts , which is providing the types and the list of all todos. Right now,
getTodos() and getTypes() methods are reading two constants, but you can
adjust them in your case to get real data from your back end with a REST call:

https://betterprogramming.pub/build-me-an-angular-app-with-memory-leaks-please-36302184e658 10/41
05/04/2024, 22:57 How to Fix Memory Leaks | Better Programming

This is the result after running ng serve and call localhost:4200 with the browser:

https://betterprogramming.pub/build-me-an-angular-app-with-memory-leaks-please-36302184e658 11/41
05/04/2024, 22:57 How to Fix Memory Leaks | Better Programming

Angular 9: Todo management app

Time for Heap Snapshot

Great! Let’s see some statistics with Chrome DevTools (F12). We will take two Heap
snapshots that show us how memory is distributed among our app’s JavaScript
(objects, primitives, strings, functions, DOM nodes, etc.) at the point of time of the
snapshot.

1. Open the Memory panel on DevTools after reloading your page (F5).

2. Enable the Heap snapshot checkbox.

3. Click on “Take snapshot” button. “Snapshot 1” is ready now.

https://betterprogramming.pub/build-me-an-angular-app-with-memory-leaks-please-36302184e658 12/41
05/04/2024, 22:57 How to Fix Memory Leaks | Better Programming

Chrome DevTools: Heap snapshot

4. Play with your web app: Create eight new todo cards with the todo dialog (click on
the plus “+” button).

5. Then click on the “Take heap snapshot” icon to take a second one. The second
recorded snapshot will have a bigger size than the first one: 8.4 Mb instead of 5.5
Mb.

6. Click on Summary, then select Comparison to see the difference. Under column
“# New,” there are the newly allocated objects in the second snapshot (new arrays,
closures, Event Emitters, Subjects, …). Under column “# Deleted,” there are the
deleted objects.

https://betterprogramming.pub/build-me-an-angular-app-with-memory-leaks-please-36302184e658 13/41
05/04/2024, 22:57 How to Fix Memory Leaks | Better Programming

Comparing two Heap snapshots

New Feature Request

We can start adding some useful functionalities, such as use the todo dialog to
create not only one todo but multiple ones at the same time, and add a condition to
the “Depends on” drop-down in the todo dialog:

a todo of type “Writing” may depend on the three todo’s types: “Writing,”
“Reading,” or “Coding.”

a todo of type “Reading” or “Coding” may depend only on “Reading” or “Coding.”

For this implementation, we will use Angular FormArray and subscription to

valueChanges of the type’s field. You have to update todo.dialog.ts: as following:

https://betterprogramming.pub/build-me-an-angular-app-with-memory-leaks-please-36302184e658 14/41
05/04/2024, 22:57 How to Fix Memory Leaks | Better Programming

todo.dialog.ts

todo.dialog.html :

https://betterprogramming.pub/build-me-an-angular-app-with-memory-leaks-please-36302184e658 15/41
05/04/2024, 22:57 How to Fix Memory Leaks | Better Programming

todo.dialog.html

We will remove createTodo() and updateTodo() methods and use openTodoDialog()

method instead in todo-list.component.ts and todo-list.component.html :

https://betterprogramming.pub/build-me-an-angular-app-with-memory-leaks-please-36302184e658 16/41
05/04/2024, 22:57 How to Fix Memory Leaks | Better Programming

todo-list.component.ts

We have to adjust the updateTodoList() method in todo.service.ts :

https://betterprogramming.pub/build-me-an-angular-app-with-memory-leaks-please-36302184e658 17/41
05/04/2024, 22:57 How to Fix Memory Leaks | Better Programming

todo.service.ts

The new todo dialog layout:

https://betterprogramming.pub/build-me-an-angular-app-with-memory-leaks-please-36302184e658 18/41
05/04/2024, 22:57 How to Fix Memory Leaks | Better Programming

Dialog to create multiple todos

That’s pretty nifty. It’s time for some truth now. You need to repeat the previous
steps 1 to 6 to compare two new heap snapshots for the current status (an initial one
and a second one after the scenario of creating a list of many todos). The outcome
will be similar to the following:

Comparing 2 heap snapshots

https://betterprogramming.pub/build-me-an-angular-app-with-memory-leaks-please-36302184e658 19/41
05/04/2024, 22:57 How to Fix Memory Leaks | Better Programming

As you can see, the required heap size is increased by 3 MB in the second snapshot.
Many new objects, listeners, arrays, DOMs are created, but none or few of them are
deleted.

Performance Timeline Record

Let’s translate this with a performance record. Open the Performance panel on
DevTools, and then enable the Memory checkbox and make a record.

Chrome DevTools: Performance recording

After you click on the Start button and before stopping the record, you need to play
with the application: Open the todo dialog multiple times, create new todos, add
new forms to the dialog, delete some of them with and without save, and update
some todos. Stop the record and wait until you can see the result:

Performance Timeline record

What’s going on here?

https://betterprogramming.pub/build-me-an-angular-app-with-memory-leaks-please-36302184e658 20/41
05/04/2024, 22:57 How to Fix Memory Leaks | Better Programming

Chrome and DevTools offer us the possibility of finding memory issues that affect
page performance, including memory leaks, memory bloat, and frequent garbage
collections. In the above record, the memory usage is broken down by:

JS heap (the memory required by Javascript, blue line)

Documents (red line)

DOM nodes (green line)

Listeners (yellow line)

GPU memory

We notice the JS heap ends higher than it began. In the real world, if you see this
pattern of increasing (JS heap size, node size, listeners size), it might mean a
memory leak. A memory leak occurs when an application fails to get rid of unused
resources and the user realizes that at some point, the application is slower,
sluggish, and will probably pause frequently, which is a symptom of potential
garbage collection issues.

In performance timeline recording, frequently rising and falling JS heap or node

count graphs mean frequent garbage collections (vertical blue lines), which is the
case in our example.

Identify JS Heap Memory Leaks

1. Open DevTools

2. Go to the Memory panel.

3. select the “Allocation instrumentation on timeline” radio button.

4. Press the Start button (black circle).

5. Perform the action that you suspect is causing the memory leak.

6. Then press the “Stop recording” button (red circle) when you’re done.

https://betterprogramming.pub/build-me-an-angular-app-with-memory-leaks-please-36302184e658 21/41
05/04/2024, 22:57 How to Fix Memory Leaks | Better Programming

Chrome DevTools: Allocation instrumentation on timeline

Every blue vertical line is an allocation of memory for some JS objects. You can
select a line with your mouse to see more details about it.

We’ve Got a Leak — How Do We Fix It?

Here are a few things that might cause memory leaks in an Angular app:

Missing unsubscription, which will retain the components in the memory

Missing unregistration for DOM event Listeners: such as a listener to a scroll

event, a listener to forms onChange event, etc.

unclosed WebSocket connections when they are unused

Detached DOM tree: A DOM node could be garbage-collected when there are no
global references to it. A node is said to be detached when it’s removed from the
DOM tree but some JavaScript still references it. Such a case could be identified
by comparing two Heap snapshots and then scrolling down to elements prefixed
by Detached under the Constructor column.

https://betterprogramming.pub/build-me-an-angular-app-with-memory-leaks-please-36302184e658 22/41
05/04/2024, 22:57 How to Fix Memory Leaks | Better Programming

A visualization of the mark & sweep garbage collection algorithm in action (Source)

When an object is not referenced anymore by something reachable from a global

object, it will be reachable by the garbage collector. Objects referencing each other
but at the same time not reachable from the root will be garbage collected.

Performance tuning action 1: unsubscribing

Our todo app is already suffering from the first-mentioned two common causes for
memory leaks. Each time a need for subscribing to observable arises, it will produce
a Subscription object, which, when the component gets destroyed by Angular
runtime, should be handled in a way that will not cause memory leaks in the
JavaScript runtime — that means calling unsubscribe() , usually inside the
ngOnDestroy method of the component.

After maintaining the subscription to formGroup.get('type').valueChanges and

removing the subscription to formGroup.valueChanges (since it’s not needed), we
added the missing unsubscriptions in todo.dialog.ts and todo-list.component.ts as

follows:

https://betterprogramming.pub/build-me-an-angular-app-with-memory-leaks-please-36302184e658 23/41
05/04/2024, 22:57 How to Fix Memory Leaks | Better Programming

Unsubscriptions from observables

Performance tuning action 2: onlySelf & emitEvent

For more fine-grained control over the changes propagation and the DOM events
emit, we can use onlySelf: true and emitEvent: false to prevent a form field’s
change from triggering the onChange method of its ancestors (the whole form or the
list of all forms in the dialog).

Before removing the listener to FormGroup valueChanges , you may have noticed that
after each change of the value in the Type drop-down, there were two log messages
displayed on the browser’s console: one from console.log('form value changed') and
the other one from console.log('type changed') because triggering the field event
listener was propagated to the parent DOM event listener.

https://betterprogramming.pub/build-me-an-angular-app-with-memory-leaks-please-36302184e658 24/41
05/04/2024, 22:57 How to Fix Memory Leaks | Better Programming

Whenever an unneeded todo form is deleted (with delete icon), you have to
remember to unsubscribe from its listeners:

Delete an item form from the formArray

Have we fixed it?

Go and repeat the previous scenario, and then take a performance timeline record
for it. See what happens; I’ll wait here. Notice anything interesting? Is there a big
difference?

I don’t think so. This improvement was no silver bullet. There’s a bit more slapped
onto these memory leaks. So, let’s continue our optimization mission.

https://betterprogramming.pub/build-me-an-angular-app-with-memory-leaks-please-36302184e658 25/41
05/04/2024, 22:57 How to Fix Memory Leaks | Better Programming

Image source: “Performance Tuning: measure, optimize and monitor” by Addy Osmani

Performance tuning action 3: OnPush ChangeDetection

Instead of the default Angular ChangeDetectionStrategy , I used the OnPush strategy
in todo dialog:

https://betterprogramming.pub/build-me-an-angular-app-with-memory-leaks-please-36302184e658 26/41
05/04/2024, 22:57 How to Fix Memory Leaks | Better Programming

OnPush ChangeDetectionStrategy in todo.dialog.ts

Performance tuning action 4: Angular pipe & minimize subscriptions

I implemented a custom pure pipe and used it in the selectBox field. The
subscription to type’s valueChanges is not needed anymore now.

Please remember that an impure pipe is called often, as often as every keystroke or
mouse move, and that an expensive, long-running pipe could destroy the user
experience.

https://betterprogramming.pub/build-me-an-angular-app-with-memory-leaks-please-36302184e658 27/41
05/04/2024, 22:57 How to Fix Memory Leaks | Better Programming

selectBox with pipe

Don’t forget to add FilterPerTypePipe to the declarations part in app.module.ts :

https://betterprogramming.pub/build-me-an-angular-app-with-memory-leaks-please-36302184e658 28/41
05/04/2024, 22:57 How to Fix Memory Leaks | Better Programming

filter-per-type.pipe.ts

I removed the subscription to todoService.getTodos() in the dialog since todoList is

already available in the todo list component and can be added to TodoDialogData . I
also moved the subscription to todoService.getTypes() to the todo list component.
No injection for TodoService is required in TodoDialog :

https://betterprogramming.pub/build-me-an-angular-app-with-memory-leaks-please-36302184e658 29/41
05/04/2024, 22:57 How to Fix Memory Leaks | Better Programming

todo-dialog.ts without any subscription

https://betterprogramming.pub/build-me-an-angular-app-with-memory-leaks-please-36302184e658 30/41
05/04/2024, 22:57 How to Fix Memory Leaks | Better Programming

todo-dialog-data.model.ts

What’s the Difference?

Here are the final Chrome DevTools statistics after the last optimization step.
During the record, I’ve executed almost the same example scenario: create nine
new todos by using the dialog three times, add and remove some forms, click one
time on the Cancel button of the dialog, and update one todo by adding a
dependency to it.

https://betterprogramming.pub/build-me-an-angular-app-with-memory-leaks-please-36302184e658 31/41
05/04/2024, 22:57 How to Fix Memory Leaks | Better Programming

Final performance timeline record

Final two Heap Snapshots

At the end of the scenario, JS Heap size in the performance timeline record was
~9 MB instead of ~10 MB (hover your mouse on the graph to see it).

The number of documents was two instead of seven in our first performance
record.

The number of listeners was 609 instead of 2,008.

The JS Heap in the second snapshot was increased by 0,8 MB — after creating
nine new todos — instead of 3 MB as at the beginning of our tutorial.

There is much less garbage collection → The problem of frequent garbage

collection is alleviated.

That makes sense, doesn’t it?

The complete Angular 9 todo application is available under this GitHub repository.

https://betterprogramming.pub/build-me-an-angular-app-with-memory-leaks-please-36302184e658 32/41
05/04/2024, 22:57 How to Fix Memory Leaks | Better Programming

Final Thought
Building large applications entails writing lots of code, complex pages, long lists,
and many components and modules. Angular is a framework that does a great job of
memory management. Nonetheless, some scenarios led to mistakes, resulting in
memory leaks and, as a consequence, a crippled user experience. We won’t know
that possibly we caused this problem until it shows up in production.

Users reload pages less and less often. They lose focus on the tasks they are
performing when performance delays are beyond one second. Beyond 10 seconds,
users are frustrated and are likely to abandon tasks. They may or may not come
back later. That’s why keeping performance optimal for long-lived sessions is
essential.

Debugging memory leaks issues can be a daunting task, and avoiding them requires
awareness about the issue and constant vigilance.

🧠💡 I write about engineering, technology, and leadership for a community of

smart, curious people. Join my free email newsletter for exclusive access or sign up
for Medium here.

You can check my video course on Udemy: How to Identify, Diagnose, and Fix Memory
Leaks in Web Apps.

Web Vitals: What Are They and How to Measure Them

Your guide to the essential performance metrics that Google uses to
influence the rank of your web app
betterprogramming.pub

How I Won My Battle of Using TensorFlow.js Without Leaking

Memory
Tips to use TFJS models without killing your web performance
levelup.gitconnected.com

https://betterprogramming.pub/build-me-an-angular-app-with-memory-leaks-please-36302184e658 33/41
05/04/2024, 22:57 How to Fix Memory Leaks | Better Programming

JavaScript Programming Web Development Technology Startup

Follow

Written by Rakia Ben Sassi

6.2K Followers · Writer for Better Programming

Google Developer Expert in Angular, WTM Ambassador, a seasoned software engineer, Content Creator |
YouTube: https://www.youtube.com/@tekforge

More from Rakia Ben Sassi and Better Programming

Rakia Ben Sassi in Level Up Coding

Command Query Responsibility Segregation (CQRS) for Dummies

https://betterprogramming.pub/build-me-an-angular-app-with-memory-leaks-please-36302184e658 34/41
05/04/2024, 22:57 How to Fix Memory Leaks | Better Programming

Hands-on the CQRS architectural paradigm

· 5 min read · Mar 11, 2024

219

Benoit Ruiz in Better Programming

Advice From a Software Engineer With 8 Years of Experience

Practical tips for those who want to advance in their careers

22 min read · Mar 21, 2023

14.8K 273

https://betterprogramming.pub/build-me-an-angular-app-with-memory-leaks-please-36302184e658 35/41
05/04/2024, 22:57 How to Fix Memory Leaks | Better Programming

Sami Maameri in Better Programming

Building a Multi-document Reader and Chatbot With LangChain and

ChatGPT
The best part? The chatbot will remember your chat history

17 min read · May 20, 2023

1.8K 17

Rakia Ben Sassi in Level Up Coding

Upgrading to Angular 15: Our Experience and Lessons Learned

https://betterprogramming.pub/build-me-an-angular-app-with-memory-leaks-please-36302184e658 36/41
05/04/2024, 22:57 How to Fix Memory Leaks | Better Programming

8 steps to a smooth transition to Angular and Angular Material 15

· 9 min read · Jan 2, 2023

344 4

See all from Rakia Ben Sassi

See all from Better Programming

Recommended from Medium

Francois J Rossouw in DVT Software Engineering

Advanced Techniques for Memory Management in Angular Applications

What are memory leaks, and how do we deal with them?

11 min read · Nov 1, 2023

19

https://betterprogramming.pub/build-me-an-angular-app-with-memory-leaks-please-36302184e658 37/41
05/04/2024, 22:57 How to Fix Memory Leaks | Better Programming

Venu Vudugula in Stackademic

Understanding Memory Leaks in Angular

Memory leaks in Angular occur when a web application retains references to objects that are
no longer needed, preventing the JavaScript…

· 3 min read · Oct 17, 2023

49 2

Lists

AI Regulation
6 stories · 401 saves

ChatGPT prompts
47 stories · 1373 saves

Growth Marketing
11 stories · 93 saves

Tech & Tools

16 stories · 195 saves

https://betterprogramming.pub/build-me-an-angular-app-with-memory-leaks-please-36302184e658 38/41
05/04/2024, 22:57 How to Fix Memory Leaks | Better Programming

Lily Chen in Performance engineering for the ordinary Barbie

Intro to Memory Profiling & Chrome DevTools Memory Tab explained

I think the Homer hiding gif best captures my immediate reaction when I saw the Memory tab
for the first time.

8 min read · Oct 11, 2023

165 2

osinpaul

Memory Leak in Angular: How to Detect and Avoid Issues

https://betterprogramming.pub/build-me-an-angular-app-with-memory-leaks-please-36302184e658 39/41
05/04/2024, 22:57 How to Fix Memory Leaks | Better Programming

Developing web applications using Angular provides developers with a powerful toolkit for
creating complex and interactive applications…

3 min read · Oct 23, 2023

76 1

Minko Gechev in Angular Blog

Introducing Angular v17

Last month marked the 13th anniversary of Angular’s red shield. AngularJS was the starting
point for a new wave of JavaScript frameworks…

17 min read · Nov 8, 2023

4.8K 49

https://betterprogramming.pub/build-me-an-angular-app-with-memory-leaks-please-36302184e658 40/41
05/04/2024, 22:57 How to Fix Memory Leaks | Better Programming

Priti Jha

What is Deferrable Views in angular 17?

Sometimes in app development, you end up with a lot of components that you need to
reference in your app, but some of those don’t need to…

4 min read · Nov 8, 2023

21

See more recommendations

https://betterprogramming.pub/build-me-an-angular-app-with-memory-leaks-please-36302184e658 41/41