Building a Full-Stack App with Angular and NestJS A Step-by-Step Guide

Why Angular and NestJS?

Angular (frontend) and NestJS (backend) are a match made in developer heaven. Both leverage TypeScript, share similar modular architectures, and prioritize scalability—making them ideal for full-stack projects. In this guide, you’ll build a simple Task Manager app with:

• A NestJS REST API for CRUD operations
• An Angular frontend to interact with the API
• Step-by-step code snippets and best practices

Prerequisites

• Node.js v18+
• Angular CLI (npm install -g @angular/cli)
• NestJS CLI (npm install -g @nestjs/cli)
• Basic TypeScript knowledge

Step 1: Set Up the NestJS Backend

1.1 Create a NestJS Project

Choose npm as your package manager.

nest new task-manager-api  

1.2 Generate a REST API Module

Create a tasks resource with CRUD endpoints:

nest generate resource tasks  

Select REST API and confirm creating CRUD entry points.

1.3 Define the Task Entity

Update src/tasks/entities/task.entity.ts:

export class Task {  
  id: number;  
  title: string;  
  description?: string;  
  completed: boolean;  
}  

1.4 Mock Database with In-Memory Data

In tasks.service.ts, add a temporary array:

private tasks: Task[] = [];  

Implement CRUD methods (e.g., create(), findAll(), update()).

1.5 Test the API

Run npm run start:dev and visit http://localhost:3000/tasks. Use Postman to verify endpoints.

Step 2: Build the Angular Frontend

2.1 Create an Angular Project

ng new task-manager-ui --routing --style=scss  

2.2 Generate a Task Service

ng generate service services/task  

Inject HttpClient to connect to your NestJS API:

@Injectable({ providedIn: 'root' })  
export class TaskService {  
  private apiUrl = 'http://localhost:3000/tasks';  
 
  constructor(private http: HttpClient) {}  
 
  getTasks(): Observable<Task[]> {  
    return this.http.get<Task[]>(this.apiUrl);  
  }  
  // Add create(), update(), delete() methods  
}  

2.3 Display Tasks in a Component

Generate a TaskListComponent:

ng generate component components/TaskList  

Fetch data in task-list.component.ts:

tasks$: Observable<Task[]>;  
 
constructor(private taskService: TaskService) {  
  this.tasks$ = this.taskService.getTasks();  
}  

2.4 Add Forms for Task Creation

Use Angular Reactive Forms to submit new tasks:

<form [formGroup]="taskForm" (ngSubmit)="onSubmit()">  
  <input formControlName="title" placeholder="Title">  
  <textarea formControlName="description"></textarea>  
  <button type="submit">Add Task</button>  
</form>  

Step 3: Connect Angular to NestJS

3.1 Enable CORS in NestJS

In main.ts, add:

app.enableCors();  

3.2 Run Both Projects

• Backend: npm run start:dev (NestJS on port 3000)
• Frontend: ng serve (Angular on port 4200)

Visit http://localhost:4200 to test the full-stack app!

Deploy to Production (Bonus)

Deploy your app using:

1. Dockerize: Create Dockerfiles for both projects.
2. AWS EC2: Use Nginx to serve the Angular app and PM2 for NestJS.

Best Practices

• Shared Interfaces: Create a shared library for Task interfaces to sync frontend/backend.
• Error Handling: Add global interceptors in NestJS and Angular’s HttpErrorInterceptor.
• Optimize Performance: Use NestJS’s built-in logging and Angular’s OnPush change detection.

Troubleshooting Tips

• CORS Errors: Double-check app.enableCors() and proxy configurations.
• 404 API Calls: Ensure NestJS is running and endpoints match Angular’s service URLs.