DEV Community: Suliman Munawar khan

How to Prevent Memory Leaks in Angular

Suliman Munawar khan — Thu, 04 Sep 2025 08:17:34 +0000

Memory leaks are one of the most common performance issues in Angular applications. They occur when your application holds references to resources that are no longer needed, preventing the JavaScript garbage collector from freeing up memory. Over time, memory leaks can slow down your app, increase load times, and cause crashes, especially in large or long-running applications.

In this blog post, we will explore the main causes of memory leaks in Angular and share practical strategies to prevent them.

1. Understanding Memory Leaks in Angular

A memory leak happens when memory that is no longer needed by the application is not released. In Angular, common sources include:

Unsubscribed Observables
Detached DOM elements
Timers or intervals left running
Long-lived services holding unnecessary data

Memory leaks can be subtle and difficult to detect because your application might appear to work correctly at first. Tools like Chrome DevTools and Angular DevTools can help track memory usage over time.

2. Common Causes of Memory Leaks in Angular

a. Unsubscribed Observables

Angular applications rely heavily on RxJS Observables for handling asynchronous data, such as HTTP requests or user interactions. Failing to unsubscribe from Observables can prevent components from being garbage collected.

export class ExampleComponent implements OnInit, OnDestroy {
  dataSubscription!: Subscription;

  ngOnInit() {
    this.dataSubscription = this.dataService.getData().subscribe(data => {
      console.log(data);
    });
  }

  ngOnDestroy() {
    this.dataSubscription.unsubscribe(); // Important!
  }
}

Best Practices:

Use takeUntil with a Subject to handle multiple subscriptions.
Use the async pipe in templates to automatically manage subscriptions.
Avoid manual subscriptions if possible.

b. Detached DOM Elements

Sometimes Angular components remove DOM elements from the view but retain references to them in the component class or service. This prevents garbage collection.

Example:

private elementRef: HTMLElement;

ngOnInit() {
  this.elementRef = document.getElementById('some-element')!;
}

If elementRef is not cleared when the component is destroyed, the memory remains occupied.

Solution:

Avoid storing raw DOM elements directly.
Use Angular's Renderer2 or template references (@ViewChild) properly.

Clear references in ngOnDestroy.

c. Timers and Intervals

JavaScript setInterval or setTimeout can keep running even after a component is destroyed.

ngOnInit() {
  this.intervalId = setInterval(() => {
    console.log('Running...');
  }, 1000);
}

ngOnDestroy() {
  clearInterval(this.intervalId);
}

Always clean up timers in the ngOnDestroy lifecycle hook.

d. Long-Lived Services Holding Data

Singleton services that hold references to large data arrays or objects can cause memory leaks if those references are never cleared.

Example:

@Injectable({ providedIn: 'root' })
export class DataService {
  cachedData: any[] = [];
}

Solution:

Clear or reset service data when it is no longer needed.
Use lazy-loaded services instead of singleton services for data that is not globally required.

3. Tools to Detect Memory Leaks

Chrome DevTools: Use the Memory tab to take heap snapshots and find detached nodes.
Augury / Angular DevTools: Helps visualize component lifecycles and detect potential memory issues.
RxJS Debugging Tools: Use operators like tap or finalize to track subscriptions.

4. Best Practices to Prevent Memory Leaks

1- Use async Pipe: Automatically unsubscribes from Observables in templates.

<div *ngIf="data$ | async as data">{{ data.name }}</div>

2- Use takeUntil for multiple subscriptions

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

ngOnInit() {
  this.dataService.getData()
    .pipe(takeUntil(this.destroy$))
    .subscribe(data => console.log(data));
}

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

3- Avoid storing DOM references directly; prefer Angular template references or Renderer2.
4- Clean up timers and intervals in ngOnDestroy.
5- Be cautious with global services; reset data when not needed.
6- Avoid circular references between components, services, or data structures.

5. Conclusion

Memory leaks in Angular may seem harmless initially, but over time they can seriously degrade application performance. The key is to be proactive:

Unsubscribe from Observables
Clear intervals and timers
Avoid unnecessary references in services and components
Regularly profile your app using memory tools

By following these best practices, you can ensure your Angular applications remain fast, responsive, and free of memory issues.

🧠 Build Your Own Document Q&A Assistant with GPT, Redis & Docker

Suliman Munawar khan — Sun, 27 Jul 2025 17:50:13 +0000

Have you ever wanted to just ask questions about a document—whether it's a research paper, contract, or report—and get an AI-powered answer instantly? That’s exactly what I built: a Document Q&A Assistant that uses GPT-3.5, Redis with vector search, and Docker to make document understanding smarter and more interactive.

In this post, I’ll walk you through the tech stack, what I’ve learned, how everything fits together, and where I plan to take it next.

🚀 Project Overview

This is a backend service that allows users to:

Upload a PDF file
Ask natural language questions about it
Get answers powered by OpenAI’s GPT-3.5-Turbo
Behind the scenes, it uses RAG (Retrieval-Augmented Generation) with Redis Vector Search

🧠 What I Learned

This project was a deep dive into several modern technologies and AI concepts:

✅ Redis Stack with Vector Search for storing and retrieving document chunks based on similarity
✅ Docker for containerizing Redis and RedisInsight
✅ RAG architecture to improve the relevance of LLM responses
✅ Connecting AI APIs (OpenAI) with real-world documents
✅ Using pdf-parse and multer for document processing in Node.js

🧬 How It Works (Architecture)

User uploads a PDF
- PDF is split into readable text chunks.
Chunks are embedded using OpenAI’s Embedding API (text-embedding-ada-002).
Embeddings are stored in Redis using a custom doc_idx vector index.
When a user asks a question, it is also embedded.
Vector similarity search retrieves the top-matching chunks.
GPT-3.5 is prompted using those chunks as context to answer the question.

This is a classic RAG workflow: Retrieve → Augment → Generate.

🧪 Example Use Cases

You can upload any PDF document and ask questions such as:

“What are the key findings of this research?”
“Who is the recipient in this contract?”
“What’s the total amount in this invoice?”

🧠 Redis Vector Index (Manual Option)

You can also manually create a vector index in Redis:

docker run -d --name redis-stack -p 6379:6379 -p 8001:8001 redis/redis-stack

RedisInsight is available at: http://localhost:8001

🔮 Future Improvements

Here's what I plan to build next:

🧾 OCR Support: Use tesseract.js to support scanned PDFs.
📄 Multi-format Support: Accept .docx, .csv, .txt files.
🔐 User Authentication: Secure access and user-based storage.
🗃 Document History: Save uploaded files, questions, and answers.
🧠 LangChain Integration: For better orchestration and multi-step reasoning.

🔐 Quick Security Tips

Validate file types (no .exe, etc.).
Add rate limiting on question API.
Use file size and token limits.

📦 Quickstart (Backend)

git clone <your-repo>
cd backend
npm install
touch .env

.env file:

OPENAI_API_KEY=your_openai_key
REDIS_URL=redis://localhost:6379
PORT=5000

Start Redis:

docker run -d --name redis-stack -p 6379:6379 -p 8001:8001 redis/redis-stack

Run the backend:

npm start

🧠 Final Thoughts

Building this Document Q&A Assistant gave me real hands-on experience with modern AI workflows, vector databases, and LLM integration. It’s a strong foundation for many real-world applications like:

Legal document search
Financial report summarization
Academic paper exploration

This is just the beginning. With OCR, better file type support, and LangChain, the possibilities are endless.

Code repo can be found below on my github

Frontend Repo
Backend Repo

👋 About Me
I’m a frontend developer working with Angular, React, and AI-assisted tools. I love writing clean, scalable code and sharing what I learn along the way.

Let’s connect in the comments — and don’t forget to ❤️ the post if you found it useful!

🚢 How to Dockerize Your Existing Angular Application

Suliman Munawar khan — Mon, 16 Jun 2025 07:33:17 +0000

Tired of hearing “It works on my machine”?

Let's fix that.

Dockerizing your Angular app helps you:

Package it with all dependencies
Run it consistently on any machine
Simplify deployment

In this guide, you'll learn how to containerize your Angular app using Docker, step-by-step — even if you're new to Docker.

🧰 Prerequisites

Make sure you have:

✅ Node.js and Angular CLI installed
✅ Docker installed and running Download Docker
✅ An existing Angular app (any version works)

🏗 Step 1: Build Your Angular App for Production

Angular apps need to be built before being served in production.

ng build --configuration production

📁 Step 2: Create Your Dockerfile

Inside the root of your Angular project, create a file named: Dockerfile

Paste the following content:

# Stage 1: Build the Angular app
FROM node:18-alpine AS build

WORKDIR /app

COPY package.json package-lock.json ./
RUN npm install

COPY . .
RUN npm run build -- --configuration production

# Stage 2: Serve the app using NGINX
FROM nginx:1.23-alpine

COPY --from=build /app/dist/* /usr/share/nginx/html

# Copy custom nginx config (optional)
COPY nginx.conf /etc/nginx/conf.d/default.conf

EXPOSE 80

CMD ["nginx", "-g", "daemon off;"]

📝 Notes:

First stage builds the Angular app using Node.js
Second stage serves the build with a lightweight NGINX server
We expose port 80 so Docker knows where the app runs

🌐 Step 3 (Optional): Add a Custom NGINX Config

You can skip this if the default is fine. But for SPAs (like Angular), custom routing helps avoid 404 errors on refresh.

Create a file: nginx.conf
Add:

server {
  listen 80;
  server_name localhost;

  root /usr/share/nginx/html;
  index index.html;

  location / {
    try_files $uri $uri/ /index.html;
  }

  error_page 404 /index.html;
}

📦 Step 4: Add .dockerignore

To speed up the build and avoid copying unnecessary files, create a .dockerignore file:

node_modules
dist
.git
.gitignore
Dockerfile
README.md

🧪 Step 5: Build Your Docker Image

From the root folder of your project, run:

docker build -t my-angular-app .

It will:

Install dependencies
Build the Angular app
Create a lightweight image ready to run

🚀 Step 6: Run Your Container

After the build completes:

docker run -d -p 8080:80 my-angular-app

Visit:
👉 http://localhost:8080

You should see your Angular app running in a Docker container!

🧼 Bonus: Clean Up

To stop the container:

docker ps  # Find the container ID
docker stop <container-id>

🌍 Deploying to the Cloud?

Now that your Angular app is dockerized, you can:

Push it to Docker Hub or GitHub Container Registry
Deploy it to Azure App Service, AWS ECS, Google Cloud Run, etc.

👋 About Me

I’m a frontend developer working with Angular, React, and AI-assisted tools. I love writing clean, scalable code and sharing what I learn along the way.

Let’s connect in the comments — and don’t forget to ❤️ the post if you found it useful!

Happy Dockering!

🔄 Smart HTTP Loader in Angular Using Interceptors – Show One Loader for All API Calls

Suliman Munawar khan — Fri, 13 Jun 2025 17:24:48 +0000

Ever faced this?

You make two or more HTTP requests in Angular
Multiple loaders show up — and flicker
Or the loader hides before all calls are done

Let’s fix that! In this article, I’ll walk you through how to build a global, smart HTTP loader using Angular interceptors. It’ll:

✅ Show just one loader for any number of API calls

✅ Stay visible until all requests finish

✅ Make your app feel polished and professional

🧠 What’s the Problem?

Angular apps often make multiple HTTP calls — maybe to load user data, dashboard stats, and notifications.

But if each call has its own loader logic, the UI becomes a mess:

Loaders flash on and off
Users think the app is done loading when it's not
Code becomes hard to manage

Let’s centralize this using HTTP interceptors and a shared LoaderService.

🔧 Step-by-Step Implementation

1️⃣ Create the LoaderService

This service will track the number of active requests.

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class LoaderService {
  private requestCount = 0;
  public isLoading$ = new BehaviorSubject<boolean>(false);

  show() {
    this.requestCount++;
    if (this.requestCount === 1) {
      this.isLoading$.next(true);
    }
  }

  hide() {
    if (this.requestCount > 0) {
      this.requestCount--;
    }

    if (this.requestCount === 0) {
      this.isLoading$.next(false);
    }
  }

  reset() {
    this.requestCount = 0;
    this.isLoading$.next(false);
  }
}

2️⃣ Create the HTTP Interceptor

This interceptor will automatically call show() and hide().

// loader.interceptor.ts
import { Injectable } from '@angular/core';
import {
  HttpInterceptor,
  HttpRequest,
  HttpHandler,
  HttpEvent,
} from '@angular/common/http';
import { Observable } from 'rxjs';
import { finalize } from 'rxjs/operators';
import { LoaderService } from './loader.service';

@Injectable()
export class LoaderInterceptor implements HttpInterceptor {
  constructor(private loaderService: LoaderService) {}

  intercept(
    req: HttpRequest<any>,
    next: HttpHandler
  ): Observable<HttpEvent<any>> {
    this.loaderService.show();

    return next.handle(req).pipe(
      finalize(() => this.loaderService.hide())
    );
  }
}

💡 Key point: The finalize() operator ensures hide() is called whether the request succeeds or fails.

3️⃣ Register the Interceptor

Add it to your app module:

// app.module.ts
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { LoaderInterceptor } from './loader.interceptor';

@NgModule({
  // ...
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: LoaderInterceptor,
      multi: true,
    },
  ],
})
export class AppModule {}

4️⃣ Show the Loader in the UI

You can now show a spinner component anywhere using the isLoading$ observable.

Here’s a simple example using Angular Material:

<!-- app.component.html -->
<mat-progress-bar
  *ngIf="isLoading$ | async"
  mode="indeterminate"
  color="primary"
></mat-progress-bar>

<router-outlet></router-outlet>

// app.component.ts
import { Component } from '@angular/core';
import { LoaderService } from './loader.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  isLoading$ = this.loaderService.isLoading$;

  constructor(private loaderService: LoaderService) {}
}

✅ Output Demo

When multiple requests fire:

You’ll see one smooth loader
It will disappear only when all requests complete
Works across any part of your app

🛠 Tips and Enhancements

Delay loader show by 100ms to avoid flashing for fast calls
Add an exclude list inside the interceptor to skip loader for certain URLs (e.g. logging, analytics)
Debounce or throttle UI updates if you’re tracking many rapid requests

🧪 Bonus: ngx-loading-bar (Optional Lib)

Prefer a library? ngx-loading-bar integrates with Angular interceptors out of the box.

npm install @ngx-loading-bar/core @ngx-loading-bar/http-client

// app.module.ts
import { LoadingBarHttpClientModule } from '@ngx-loading-bar/http-client';

@NgModule({
  imports: [LoadingBarHttpClientModule],
})
export class AppModule {}

Drop this in your layout:

<ngx-loading-bar></ngx-loading-bar>

Boom 💥 Instant loader for all HTTP requests.

🏁 Conclusion

You now have a professional, smart loader system that just works 🔁

It’s:

Centralized
Lightweight
Easy to maintain

No more copy-pasting loader logic all over your components!

👋 About Me

I’m a frontend developer working with Angular, React, and AI-assisted tools. I love writing clean, scalable code and sharing what I learn along the way.

Let’s connect in the comments — and don’t forget to ❤️ the post if you found it useful!

Would you like me to write the next article in this Angular Pro Tips series on dynamic dashboards with charts?

🔥 Angular Pro Tips: Creating a Custom Pipe for Human-Readable Numbers (K, M, B Format)

Suliman Munawar khan — Thu, 12 Jun 2025 11:52:03 +0000

Displaying large numbers in dashboards or reports can clutter your UI and overwhelm users. Let’s solve this by creating a custom Angular pipe that converts numbers into a more readable format — like 1,500 to 1.5K and 2,500,000 to 2.5M.

In this post, you'll learn how to build a clean, reusable pipe that formats large numbers using suffixes like K, M, and B.

🧠 Why Use a Custom Pipe?

Angular comes with built-in pipes (like date, currency, and number) — but sometimes you need more control. A custom pipe:

Keeps templates clean
Promotes reusability
Keeps formatting logic separated from business logic

⚙️ Step 1: Generate the Pipe

In your Angular project, run the following command:

ng generate pipe numberSuffix

This creates a new file: number-suffix.pipe.ts.

🛠 Step 2: Add the Logic

Open number-suffix.pipe.ts and replace the contents with:

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({ name: 'numberSuffix' })
export class NumberSuffixPipe implements PipeTransform {
  transform(value: number): string {
    if (value == null) return '';
    if (value < 1000) return value.toString();
    const suffixes = ['', 'K', 'M', 'B'];
    const tier = Math.floor(Math.log10(value) / 3);
    if (tier === 0) return value.toString();
    const suffix = suffixes[tier];
    const scale = Math.pow(10, tier * 3);
    const scaled = value / scale;
    return scaled.toFixed(2).replace(/\.00$/, '') + suffix;
  }
}

💡 What’s Happening Here:

We find the “tier” (thousands, millions, billions) based on the number’s size.
We scale the number down and attach the appropriate suffix.
.toFixed(2).replace(/.00$/, '') ensures clean output — e.g., 1.00K becomes 1K.

🧪 Step 3: Use the Pipe in Your Template

Example usage in a component template:

<p>{{ 950 | numberSuffix }}</p>         <!-- Output: 950 -->
<p>{{ 1500 | numberSuffix }}</p>        <!-- Output: 1.5K -->
<p>{{ 2000000 | numberSuffix }}</p>     <!-- Output: 2M -->
<p>{{ 7250000000 | numberSuffix }}</p>  <!-- Output: 7.25B -->

✨ Optional Enhancements

You can extend the pipe to:

Support custom decimal places (toFixed(1) or toFixed(0))
Add support for trillions (T) or other units
Format negative numbers or currency strings

Let your use case guide you!

🏁 Conclusion

We just built a handy little utility that can instantly improve the readability of your data-heavy UIs.

✅ Clean
✅ Reusable
✅ Declarative in templates

👀 Up Next in Angular Pro Tips

In the next post, we’ll build a smart loader using HTTP interceptors — showing one loading indicator no matter how many requests fire off at once.

Follow me for more Angular and AI programming insights — and feel free to drop questions or suggestions in the comments!

🚀 Bringing Cloud Ideas to Life: My AI-Powered Project Idea Generator

Suliman Munawar khan — Fri, 30 May 2025 19:15:15 +0000

Hi there! 👋 I’m thrilled to share a new project I’ve been working on — it’s called CloudIdeaGeneration. 🌥️ This web app helps you come up with interesting cloud project ideas that match your cloud provider, your skill level, and the services you’re curious about. Let me walk you through how it all works!

🌟 Why I Built It
When I first started exploring the world of cloud computing — AWS, Azure, and Google Cloud — I felt a little lost. There were just too many services to pick from, and I didn’t always know where to start. So, I thought:

“What if I had a tool that could suggest cloud projects tailored to my experience and the services I want to learn?”

That’s exactly what CloudIdeaGeneration does!

💡 How It Works
Using the power of AI, this app can suggest project ideas based on:
✅ The cloud provider you want to use (AWS, Azure, or GCP)
✅ Your skill level: Beginner, Intermediate, or Advanced
✅ The specific services you’re excited about

For example, if you’re just starting with Azure and want to learn about Azure Functions and Blob Storage, it’ll give you beginner-friendly project ideas you can build right away!

🔥 Features You’ll Love
🌈 AI-Powered Suggestions
Choose between OpenAI and Gemini (by Google) to generate unique and relevant project ideas.

🌈 Easy Selection
Pick your cloud provider and select the services you’re curious about — no more guesswork!

🌈 Detailed Project Plans
Get everything you need to kick off your project:

A catchy title and clear description

Difficulty rating

Estimated time to build

High-level implementation steps

Cost insights with links to official pricing

Stretch goals if you want to take it further

Alternative services you can explore

🌈 Modern & Responsive UI
Built with Bootstrap 5 and FontAwesome icons — so it looks great on any device.

🌈 Dark Mode Ready
Switch between light and dark themes to match your mood!

🛠️ How It’s Built
Here’s what’s under the hood:

Frontend: Angular

Backend: Node.js and Express

Security: CORS protection, rate limiting, and secure headers with Helmet

APIs: Use either OpenAI or Gemini to power the project suggestions.

To keep everything clean and scalable, I separated the app into two repos:

Frontend
Backend

🚀 Where to Find It
👉 Try it out here: CloudIdeaGeneration App
👉 Backend is running smoothly on Render.com and the frontend is live on Netlify.

Just select your options and click “Generate Ideas” — you’ll get three tailored project ideas every time!

💭 Final Thoughts
I built this app because I know how tricky it can be to find that perfect first project or the next step in your cloud journey. My hope is that CloudIdeaGeneration makes it easier, faster, and a lot more fun. 🌟

I’d love to hear your thoughts!
💡 How can I make this tool even better?
💡 Are there other features you’d like to see?
💡 Or maybe you have new ideas for services or providers to include?

Your feedback will help me keep refining and expanding CloudIdeaGeneration so it can be as helpful as possible for everyone in the cloud community.

If you’re learning cloud tech, give it a try and let me know what you think!
And if you’re curious, check out the source code on GitHub and feel free to contribute.