ASP.NET Core  

How to Connect Angular Frontend With ASP.NET Core Web API?

Introduction

Connecting an Angular frontend with an ASP.NET Core Web API is a common architecture pattern for building modern, scalable, and high-performance web applications. Angular handles the client-side user interface, while ASP.NET Core Web API manages backend logic, business rules, authentication, and database operations. This separation enables clean architecture, independent deployment, and better maintainability in enterprise-grade applications.

Understanding the Architecture

In a typical Angular and ASP.NET Core integration:

  • Angular acts as the frontend SPA (Single Page Application).

  • ASP.NET Core Web API exposes RESTful endpoints.

  • Communication happens over HTTP using JSON.

  • The backend usually connects to a database using Entity Framework Core.

The frontend consumes API endpoints using Angular’s HttpClient module.

Step 1: Create ASP.NET Core Web API

Create a new Web API project:

dotnet new webapi -n MyApp.Api

Ensure CORS (Cross-Origin Resource Sharing) is enabled because Angular and ASP.NET Core typically run on different ports during development.

Inside Program.cs:

builder.Services.AddCors(options =>
{
    options.AddPolicy("AllowAngularApp",
        policy => policy
            .WithOrigins("http://localhost:4200")
            .AllowAnyHeader()
            .AllowAnyMethod());
});

app.UseCors("AllowAngularApp");

Create a sample controller:

[ApiController]
[Route("api/[controller]")]
public class ProductsController : ControllerBase
{
    [HttpGet]
    public IActionResult Get()
    {
        return Ok(new[] { "Laptop", "Mobile", "Tablet" });
    }
}

Run the API and verify the endpoint works at:

https://localhost:5001/api/products

Step 2: Create Angular Application

Create a new Angular project:

ng new myapp-client
cd myapp-client
ng serve

Angular runs by default at:

http://localhost:4200

Step 3: Import HttpClientModule

Open app.module.ts and import HttpClientModule:

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

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

This module enables Angular to communicate with REST APIs.

Step 4: Create Angular Service for API Calls

Generate a service:

ng generate service services/product

Inside product.service.ts:

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

@Injectable({ providedIn: 'root' })
export class ProductService {

  private apiUrl = 'https://localhost:5001/api/products';

  constructor(private http: HttpClient) {}

  getProducts(): Observable<string[]> {
    return this.http.get<string[]>(this.apiUrl);
  }
}

Step 5: Consume API in Angular Component

Update app.component.ts:

import { Component, OnInit } from '@angular/core';
import { ProductService } from './services/product.service';

@Component({
  selector: 'app-root',
  template: `
    <h2>Product List</h2>
    <ul>
      <li *ngFor="let product of products">{{ product }}</li>
    </ul>
  `
})
export class AppComponent implements OnInit {

  products: string[] = [];

  constructor(private productService: ProductService) {}

  ngOnInit(): void {
    this.productService.getProducts().subscribe(data => {
      this.products = data;
    });
  }
}

When Angular loads, it calls the ASP.NET Core Web API endpoint and displays the data.

Handling Environment Configuration

Instead of hardcoding the API URL, configure environment files.

In environment.ts:

export const environment = {
  production: false,
  apiUrl: 'https://localhost:5001/api'
};

Then reference it inside the service:

private apiUrl = `${environment.apiUrl}/products`;

This allows different API base URLs for development, staging, and production.

Securing Angular and ASP.NET Core Integration

For production-grade applications:

  • Implement JWT authentication in ASP.NET Core

  • Use HTTPS in all environments

  • Configure Angular interceptors for adding authorization headers

  • Enable proper CORS policies

  • Validate input on both frontend and backend

This ensures secure communication between Angular frontend and ASP.NET Core backend.

Using Proxy Configuration in Angular (Development Only)

To avoid CORS issues during development, create proxy.conf.json:

{
  "/api": {
    "target": "https://localhost:5001",
    "secure": false,
    "changeOrigin": true
  }
}

Run Angular with:

ng serve --proxy-config proxy.conf.json

Now API calls can be made to "/api/products" without exposing the full backend URL.

Production Deployment Strategy

In production, Angular is typically built and hosted as static files:

ng build --configuration production

The generated files can be:

  • Hosted inside ASP.NET Core (wwwroot)

  • Deployed to a CDN

  • Hosted on cloud platforms

ASP.NET Core Web API can be deployed separately or alongside the Angular app depending on infrastructure design.

Common Issues and Troubleshooting

  • CORS errors – Verify allowed origins configuration

  • SSL certificate errors – Ensure valid HTTPS certificates

  • 404 API errors – Confirm correct route mapping

  • Environment mismatch – Verify API base URLs

Proper logging and browser developer tools help diagnose integration issues efficiently.

Summary

Connecting an Angular frontend with an ASP.NET Core Web API enables clean separation of concerns, scalable architecture, and high-performance web application development. By configuring CORS correctly, using Angular HttpClient for API consumption, implementing environment-based configurations, and securing communication with authentication and HTTPS, developers can build robust full-stack applications that leverage the strengths of both Angular and ASP.NET Core while ensuring maintainability and enterprise-grade reliability.

Membership not found