Part 1: Architecture & Project Setup

In this tutorial, we configure an ASP.NET Core 8 Web API project with Angular 17 standalone components using Clean Architecture principles.

Project Architecture Overview

Clean Architecture separates the application into layers: Domain, Application, Infrastructure, and Presentation (Web API).

1. ASP.NET Core Program Setup

Configure the dependency injection container and essential middleware in Program.cs:

var builder = WebApplication.CreateBuilder(args);

// Add services to the container
builder.Services.AddControllers();
builder.Services.AddEndpointsApiExplorer();
builder.Services.AddSwaggerGen();

// Configure CORS for Angular frontend
builder.Services.AddCors(options => {
    options.AddPolicy("AllowAngularDev", policy => {
        policy.WithOrigins("http://localhost:4200")
              .AllowAnyHeader()
              .AllowAnyMethod();
    });
});

var app = builder.Build();

if (app.Environment.IsDevelopment()) {
    app.UseSwagger();
    app.UseSwaggerUI();
}

app.UseHttpsRedirection();
app.UseCors("AllowAngularDev");
app.UseAuthorization();
app.MapControllers();

app.Run();

2. Initialize Angular 17 Client

Create the client application using the Angular CLI:

# Install Angular CLI globally
npm install -g @angular/cli

# Create standalone application
ng new client-app --standalone --routing --style=scss
cd client-app
ng serve

Your application is now running at http://localhost:4200/.