How to Create a Modern Web App Using Angular and ASP.NET Core 9 (with VS Code)?

A full-stack app setup using:

• 🌐 Angular 17+ frontend

• 🖥️ ASP.NET Core 9 Web API backend

• 🧰 Visual Studio Code as your IDE

📦 Prerequisites

Make sure you have the following tools installed:

🔧 Step 1: Create the Backend (ASP.NET Core 9 API)

Open terminal in VS Code and run:

Optional: Enable CORS

Edit Program.cs:

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

Then use it in the pipeline:

app.UseCors("AllowAngular");

✅ Save the file.

🚀 Step 2: Run the API in VS Code

In terminal:

• Test: open https://localhost:5001/api/weatherforecast in your browser

• Or use Thunder Client (extension) to test it in VS Code

🧱 Step 3: Create the Angular Frontend

In a new terminal window (not inside BackendApp), run:

✔ Choose "Yes" to Angular routing
✔ Choose "SCSS" or "CSS" for styling

🌉 Step 4: Connect Angular to .NET API

First, install HttpClientModule if not already present:

In app.module.ts:

Generate a service:

Inside weather.service.ts:

import { Injectable } from '@angular/core'; 
import { HttpClient } from '@angular/common/http'; 
import { Observable } from 'rxjs'; 
@Injectable({ providedIn: 'root' })
 export class WeatherService { 
        private apiUrl = 'https://localhost:5001/api/weatherforecast'; 
         constructor(private http: HttpClient) {} getWeather(): Observable<any> { return this.http.get(this.apiUrl); }
 }

📺 Step 5: Use the Service in Angular

In app.component.ts:

import { Component, OnInit } from '@angular/core';
import { WeatherService } from './services/weather.service'; 
@Component({ 
selector: 'app-root', 
template: ` <h2>Weather Forecast</h2> <ul> <li *ngFor="let item of weather">{{ item.date }} - {{ item.temperatureC }}°C</li> </ul> ` 
}) 
export class AppComponent implements OnInit { 
weather: any[] = []; 
constructor(private weatherService: WeatherService) {} ngOnInit() { 
this.weatherService.getWeather().subscribe(data => { this.weather = data; }); } 
}

🧪 Step 6: Run the Angular App

Open: http://localhost:4200

Make sure your backend is also running at https://localhost:5001.

📦 Optional: Serve Angular with .NET Core in Production

1. Build Angular:

    

   ng build --configuration production

2. Copy contents of dist/frontend-app into BackendApp/wwwroot

3. Update Program.cs:

    

   app.UseDefaultFiles(); app.UseStaticFiles(); app.MapFallbackToFile("index.html");

4. Run the backend. It now serves Angular too!

✅ Final Folder Structure