IT'S ALL ABOUT PROGRAMMING

🎯 Introduction

This article is all about setting up environment for most popular SPA (single page application) framework and platform i.e. Angular. The intended audience for this article is the beginners who want to learn Angular and are dot net developers. Since it is from the beginner’s perspective I am starting with how to setup environment for angular in Visual Studio 2022. Eventually we will be going through all the features of angular step by step. So please bear with me throughout the journey. 🙂

⏱️ Time to Complete: 20-30 minutes

💻 What You’ll Build: Full-stack Angular + .NET Core application

📈 Why This Matters: Master the #1 enterprise SPA stack in 2025

📚 Background

Angular has been evolved a lot since its introduction to world from its starting version 1.x which then was called AngularJS where we had a simple JavaScript framework that provides developers to extend HTML DOM elements with additional attributes to perform user actions. Earlier when we had to use AngularJS in any project then we just had to refer one JS file and we could easily use the features of AngularJS.

Later on, Angular was launched with version 2 which was a complete architectural shift and different from AngularJS 1.x. Angular has now reached version 18 (as of 2025) which inherits the same architecture as started with Angular 2 with significant improvements in performance, developer experience, and modern features like:

• Standalone Components (default since Angular 17)
• Enhanced SSR (Server-Side Rendering)
• Improved Bundle Sizes (60% smaller than Angular 6)
• Better TypeScript Integration
• Modern Build Tools (Vite support)

Now we cannot use the Angular just by referring one file to project because of modularity which in fact is good. So whatever module we want to use we can import and use within that component.

It requires a completely different setup to work. Especially when we are working with Visual Studio and ASP.NET Core 8.0 (the latest LTS version). Let’s proceed with steps to achieve our goal.

🛠️ Setting Up (Updated for 2025)

In this section we are going to setup environment for Angular in Visual Studio 2022. Since Angular works well with ASP.NET Core which has already provided Middleware, Classes and Methods to cope up with SPA frameworks so I will be using the same. I’m using .NET Core SDK 8.0 as per the latest LTS release.

Prerequisites Checklist:

• Node.js 20+ (LTS recommended)
• Angular CLI 18 (npm install -g @angular/cli@latest)
• .NET 8.0 SDK (latest LTS)
• Visual Studio 2022 (17.8 or later)
• TypeScript 5.0+ (usually comes with VS 2022)

💡 Pro Tip: Verify your installations with these commands:

node --version    # Should show 20.x.x
ng version        # Should show Angular CLI 18.x.x
dotnet --version  # Should show 8.x.x

So, let’s begin with first step which starts with creating a project in visual studio.

I am selecting Web API project here so that I get an empty project without Views or prior setup.

Try to build your solution before adding Angular 18 to make sure you have everything is working fine and no issues with any dependencies.

Now, let’s add Angular 18 application to this project through Angular CLI. To do so, open command prompt and navigate to folder where you have your project created. In my case I added to BookStore folder so here you can run your command to install angular cli.

# Install Angular CLI globally (if not already installed)
npm install -g @angular/cli@latest

After Angular CLI installation now lets install angular. Make sure when you run the command at the same place where you have your .csproj file.

# Create Angular 18 app with modern features
ng new ClientApp --standalone --ssr --style=scss

🆕 Angular 18 Features Enabled:

• --standalone: Uses modern standalone components (no NgModules needed)
• --ssr: Enables Server-Side Rendering for better SEO
• --style=scss: Modern CSS preprocessing

After command runs successfully you will find your solution as below.

🔧 Using the Code (Updated Configuration)

To successfully run our application, we need to make few changes in the C# code for .NET 8.0 compatibility.

Add middleware to support SPA in .NET Core App. And to do that, open Program.cs (note: .NET 8 uses top-level programs, not Startup.cs) and register the SPA service that can provide static files to be served for a Single Page Application (SPA).

Updated Program.cs for .NET 8:

var builder = WebApplication.CreateBuilder(args);

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

// Configure SPA services
builder.Services.AddSpaStaticFiles(configuration =>
{
    configuration.RootPath = "ClientApp/dist/clientapp";
});

var app = builder.Build();

// Configure the HTTP request pipeline.
if (app.Environment.IsDevelopment())
{
    app.UseSwagger();
    app.UseSwaggerUI();
}

app.UseHttpsRedirection();
app.UseStaticFiles();

if (!app.Environment.IsDevelopment())
{
    app.UseSpaStaticFiles();
}

app.UseRouting();
app.UseAuthorization();

app.MapControllers();

// Configure SPA
app.UseSpa(spa =>
{
    // To learn more about options for serving an Angular SPA from ASP.NET Core,
    // see https://go.microsoft.com/fwlink/?linkid=864501
    spa.Options.SourcePath = "ClientApp";

    if (app.Environment.IsDevelopment())
    {
        spa.UseAngularCliServer(npmScript: "start");
    }
});

app.Run();

spa.Options.SourcePath = "ClientApp";

This will ensure that all the static contents are going to load from ClientApp folder.

Since we created an API project from VS 2022 so we need to update launch settings from Properties/launchsetting.json. Remove launch url key value "launchUrl": "api/values", and save the file.

🚨 Common Issue Fix (IE Compatibility)

If you are running your application on IE10, IE 11 then you might encounter an error with vendor.js or polyfill.js. Note: IE support is deprecated in Angular 15+, but for legacy environments:

To overcome this issue and run on IE 10, IE 11 which I prefer because it helps in easy debugging. Go to polyfills.ts file and un-comment the sections related to IE.

⚠️ Important: Modern applications should target evergreen browsers. IE support adds significant bundle size and complexity.

⚡ Performance Improvements (2025 Edition)

Angular 18 automatically provides these optimizations:

Enable Additional Optimizations:

1. Update angular.json for production builds:

"budgets": [
  {
    "type": "initial",
    "maximumWarning": "500kb",
    "maximumError": "1mb"
  }
]

2. Enable Response Compression in .NET 8:

// Add to Program.cs
builder.Services.AddResponseCompression();
app.UseResponseCompression();

🚀 Running Your Application

It’s time to finally build and run application. Let’s see what happens:

# Navigate to your project root
dotnet run

🎉 Voila!!! It works.

You should see your Angular 18 application running with:

• ✅ Hot reload enabled
• ✅ API integration working
• ✅ Modern Angular features active
• ✅ Optimized performance

🐛 Troubleshooting Common Issues

❌ Issue #1: Build Errors

Problem: Angular build fails

Solution: Ensure Node.js 20+ and clear npm cache

npm cache clean --force
npm install

❌ Issue #2: API Not Found

Problem: Angular can’t reach .NET API

Solution: Check proxy.conf.json configuration

{
  "/api/*": {
    "target": "https://localhost:7001",
    "secure": true,
    "changeOrigin": true
  }
}

❌ Issue #3: TypeScript Errors

Problem: Compilation errors in Angular

Solution: Update TypeScript version

npm update typescript @angular/cli

📊 What’s New in 2025?

Major Changes from the Original 2018 Setup:

• Standalone Components: No more NgModules for simple apps
• Built-in SSR: Better SEO and performance
• Vite Integration: 10x faster development builds
• Improved Tree Shaking: Smaller production bundles
• Enhanced TypeScript: Better type safety and IntelliSense

Migration Benefits:

• 📈 67% smaller application bundles
• ⚡ 73% faster build times
• 🔒 Enhanced security with latest frameworks
• 🛠️ Better developer experience with modern tooling

🎯 Summary

In this article we learned how to setup Angular 18 in ASP.NET Core 8.0 application with Visual Studio 2022. The setup has been significantly improved since 2018 with modern features like standalone components and enhanced SSR support. This is the foundation step to begin our journey with modern Angular development.

Key Takeaways:

• Modern tooling setup (Angular 18 + .NET 8 + VS 2022)
• Performance optimizations built-in
• Future-proof architecture
• Enterprise-ready configuration