Integrating Angular with ASP.NET Core Locally | Step-by-Step Guide

Integrating Angular with ASP.NET Core is a powerful way to build full-stack web applications. By combining Angular’s dynamic frontend capabilities with ASP.NET Core’s robust backend services, developers can create scalable, maintainable, and high-performance applications. In this guide, we will cover:

• Setting up the Angular frontend and .NET Core backend
• Enabling CORS in .NET Core for local communication
• Using proxy configuration to avoid CORS issues
• Serving the Angular app from .NET Core using SPA services

1. Setting Up Angular Frontend and .NET Core Backend

Install Prerequisites

Before integrating Angular with ASP.NET Core, ensure you have the following installed:

• Node.js (includes npm)
• Angular CLI
• Visual Studio 2022 (or VS Code)
• .NET SDK

Create an ASP.NET Core Web API

Run the following command to create a new ASP.NET Core Web API project:

mkdir AngularDotNetApp && cd AngularDotNetApp

dotnet new webapi -n Backend

Navigate to the Backend folder and run the application:

cd Backend

dotnet run

The default ASP.NET Core API runs on https://localhost:5001.

Create an Angular App

Navigate to the project root and generate an Angular application:

cd ..
npx -p @angular/cli ng new frontend --routing --style=scss

Move into the Angular project folder:

cd frontend

Run the Angular development server:

ng serve --open

This will start the Angular app on http://localhost:4200.

2. Enabling CORS in .NET Core for Local Communication

By default, browsers enforce Cross-Origin Resource Sharing (CORS) policies, restricting API calls between different origins. To allow Angular to communicate with ASP.NET Core, enable CORS.

Modify Program.cs in ASP.NET Core

Open Program.cs and add the following code to enable CORS:

var builder = WebApplication.CreateBuilder(args);

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

var app = builder.Build();

app.UseCors("AllowAngularApp");
app.UseAuthorization();
app.MapControllers();

app.Run();

Restart the ASP.NET Core application to apply changes.

3. Using Proxy Configuration to Avoid CORS Issues

Instead of modifying backend CORS settings, Angular allows defining a proxy configuration to reroute API requests.

Create Proxy Configuration in Angular

Inside the frontend folder, create a proxy.conf.json file:

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

Modify angular.json to use the proxy file when serving the Angular application:

"serve": {
  "options": {
    "proxyConfig": "src/proxy.conf.json"
  }
}

Run the Angular project with the proxy:

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

Now, all API calls to /api will be redirected to the ASP.NET Core backend.

4. Serving Angular App from .NET Core Using SPA Services

For production deployments, serve the Angular app from within the .NET Core backend.

Install Required Dependencies

Ensure Microsoft.AspNetCore.SpaServices.Extensions is installed:

dotnet add package Microsoft.AspNetCore.SpaServices.Extensions

Configure ASP.NET Core to Serve Angular

Modify Program.cs to include Angular hosting:

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddSpaStaticFiles(configuration =>
{
    configuration.RootPath = "frontend/dist/frontend";
});

var app = builder.Build();

app.UseSpaStaticFiles();

app.UseSpa(spa =>
{
    spa.Options.SourcePath = "frontend";

    if (app.Environment.IsDevelopment())
    {
        spa.UseProxyToSpaDevelopmentServer("http://localhost:4200");
    }
});

app.Run();

Build and Serve Angular from .NET Core

Inside the frontend folder, build the Angular project:

ng build --configuration production

Run the ASP.NET Core application:

dotnet run

Now, the Angular app is served from the ASP.NET Core backend at https://localhost:5001.

Conclusion

Integrating Angular with ASP.NET Core locally creates a seamless full-stack development experience. We have:

• Set up the Angular frontend and .NET Core backend
• Enabled CORS for local development
• Used proxy configuration to avoid CORS issues
• Served the Angular app from .NET Core

With this setup, you can efficiently develop and deploy full-stack applications using Angular and ASP.NET Core. Happy coding!