How to integrate Angular 19 with Node.js and Express for full-stack development

Building a full-stack web application using Angular 19 as the frontend and Node.js with Express as the backend is a powerful approach. This combination allows developers to create scalable, efficient, and real-time applications. In this guide, we will walk through the steps to integrate Angular 19 with Node.js and Express, covering backend setup, frontend integration, and API communication.

Step 1: Setting Up Node.js and Express Backend

1. Initialize a Node.js project

mkdir backend && cd backend
npm init -y

      2. Install required dependencies

npm install express cors body-parser mongoose dotenv

     3. Create an Express server (server.js)

const express = require('express');
const cors = require('cors');
const bodyParser = require('body-parser');

const app = express();
app.use(cors());
app.use(bodyParser.json());

app.get('/', (req, res) => {
    res.send('Hello from Express');
});

app.listen(5000, () => {
    console.log('Server running on port 5000');
});

     4. Run the backend server

node server.js

Step 2: Setting Up Angular 19 Frontend

1. Create a new Angular project

ng new frontend
cd frontend

      2. Install HttpClient module (if not already installed

npm install @angular/common

      3. Update app.module.ts to import HttpClientModule

import { HttpClientModule } from '@angular/common/http';

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

Step 3: Connecting Angular with Express API

1. Create a service in Angular

ng generate service api

      2. Modify api.service.ts to fetch data from Express

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class ApiService {
  private apiUrl = 'http://localhost:5000';

  constructor(private http: HttpClient) { }

  getMessage() {
    return this.http.get(`${this.apiUrl}`);
  }
}

      3. Use the service in a component (e.g., app.component.ts)

import { Component, OnInit } from '@angular/core';
import { ApiService } from './api.service';

@Component({
  selector: 'app-root',
  template: `<h1>{{ message }}</h1>`
})
export class AppComponent implements OnInit {
  message: string = '';

  constructor(private apiService: ApiService) { }

  ngOnInit() {
    this.apiService.getMessage().subscribe((data: any) => {
      this.message = data;
    });
  }
}

Step 4: Running and Testing the Full-Stack App

1. Start the backend

node server.js

      2. Start the frontend

ng serve --open

   3. Check in the browser

• Visit http://localhost:4200 and you should see the message from the Node.js backend.

Conclusion

By following these steps, you have successfully integrated Angular 19 with Node.js and Express to create a full-stack web application. This setup allows seamless communication between the frontend and backend, enabling you to build modern, scalable, and interactive web applications. You can now extend this by adding database integration (MongoDB), authentication, and more complex APIs to create a fully functional web app. 🚀

---

Related Tutorials

Laravel Implement Flash Messages Example
How to integrate Angular 19 with Node.js and Express for full-stack development
Best practices for connecting Angular 19 frontend with Laravel API
Step-by-step guide to upgrading an existing project to Angular 19
How to implement authentication in Angular 19 using JWT and Firebase
Optimizing server-side rendering in Angular 19 with route-level render modes
Using Angular 19 signals for state management in large applications
How to create standalone components in Angular 19 for modular architecture
Building a CRUD application in Angular 19 with MongoDB and Express
Implementing lazy loading in Angular 19 to improve performance
How to integrate Angular 19 with GraphQL for efficient data fetching
Mastering Angular and Express.js for Full-Stack Web Development