ASP.NET Core  

How to Set Up Your First Angular + ASP.NET Core Development Environment

Introduction

In today’s fast-paced digital world, building web applications that are fast, secure, and scalable has become a necessity. Combining Angular, a robust front-end framework, with ASP.NET Core, a powerful back-end framework, allows developers to build modern, enterprise-grade applications efficiently. Angular handles dynamic and responsive user interfaces, while ASP.NET Core provides secure and scalable server-side functionality.

Setting up a development environment that supports both frameworks is the first critical step toward building full-stack web applications. This article provides a detailed, step-by-step guide for beginners and intermediate developers to set up their first Angular + ASP.NET Core environment. It also covers best practices and common issues you may encounter during setup.

Prerequisites

Before setting up your development environment, you need to ensure your system meets the following requirements:

  1. Operating System

    • Windows 10 or later (recommended)

    • Linux or macOS are also supported for ASP.NET Core and Angular development.

  2. Basic Knowledge

    • Familiarity with HTML, CSS, and JavaScript.

    • Basic understanding of C# and .NET framework.

    • Understanding of Node.js and npm (Node Package Manager) is helpful.

  3. Software Requirements

    • .NET SDK (latest stable version)

    • Node.js and npm (Node Package Manager)

    • Angular CLI

    • Visual Studio 2022/2019 or Visual Studio Code

    • Browser (Google Chrome or Microsoft Edge recommended)

Step 1: Installing .NET SDK

ASP.NET Core applications require the .NET SDK to compile and run. Follow these steps to install it:

  1. Visit the official .NET website: https://dotnet.microsoft.com.

  2. Download the latest stable .NET SDK version for your operating system.

  3. Run the installer and follow the on-screen instructions.

  4. Verify the installation by opening Command Prompt or Terminal and typing:

dotnet --version

You should see the installed .NET version displayed.

Tips

  • Make sure to download the SDK, not just the runtime. The SDK includes development tools required to build applications.

  • Keep your SDK updated to use the latest features of ASP.NET Core.

Step 2: Installing Node.js and npm

Angular requires Node.js and npm to work. Node.js is a JavaScript runtime environment, and npm is its package manager.

  1. Go to the official Node.js website: https://nodejs.org.

  2. Download the LTS (Long-Term Support) version for stability.

  3. Install Node.js by following the installation wizard.

  4. Verify the installation by running the following commands in Command Prompt or Terminal:

node -v
npm -v

You should see the installed versions of Node.js and npm.

Tips:

  • Use the LTS version for production and development.

  • If you already have Node.js installed, ensure it’s updated to a compatible version with Angular.

Step 3: Installing Angular CLI

Angular CLI (Command Line Interface) helps you scaffold, build, and manage Angular applications easily. To install Angular CLI:

  1. Open Command Prompt or Terminal.

  2. Run the following command:

npm install -g @angular/cli

  1. Verify the installation:

ng version

You should see Angular CLI and related package versions.

Tips:

  • The -g flag installs Angular CLI globally so it can be used in any project.

  • Angular CLI simplifies project creation, development server management, and build optimization.

Step 4: Installing Visual Studio or Visual Studio Code

You need an Integrated Development Environment (IDE) for efficient coding.

Option 1: Visual Studio 2022 (Recommended for Full-Stack Developers)

  1. Download Visual Studio from https://visualstudio.microsoft.com.

  2. During installation, select ASP.NET and web development workload.

  3. Ensure Node.js development tools are also installed if you plan to integrate Angular directly.

Option 2: Visual Studio Code (Lightweight Alternative)

  1. Download Visual Studio Code from https://code.visualstudio.com.

  2. Install essential extensions:

    • C# for .NET development

    • Angular Essentials (TypeScript and Angular snippets)

    • REST Client (for API testing)

    • Prettier (code formatting)

Tips

  • Visual Studio provides integrated templates for Angular + ASP.NET Core projects.

  • Visual Studio Code is lightweight and flexible for Angular-heavy projects.

Step 5: Creating an ASP.NET Core Backend Project

Now that your tools are ready, start by creating a backend project.

Using Visual Studio

  1. Open Visual Studio and select Create a new project.

  2. Choose ASP.NET Core Web API and click Next.

  3. Enter a project name, location, and solution name. Click Create.

  4. Choose the .NET 6/7 or later framework.

  5. Enable OpenAPI/Swagger for easy API testing.

  6. Click Create.

Using Command Line

Open Terminal and run:

dotnet new webapi -n MyDotNetBackend
cd MyDotNetBackend
dotnet run

Your API will start, typically at https://localhost:5001 or http://localhost:5000.

Tips:

  • Use Swagger UI (/swagger) to test API endpoints.

  • Start with basic controllers and routes before integrating Angular.

Step 6: Creating an Angular Frontend Project

After the backend is ready, create the Angular frontend.

  1. Open Terminal and navigate to your preferred workspace.

  2. Run the following command:

ng new MyAngularApp

  1. Choose options:

    • Routing: Yes

    • Stylesheet format: CSS (or SCSS if preferred)

  2. Navigate into the project folder:

cd MyAngularApp

  1. Serve the application locally:

ng serve --open

This will open the Angular application in your browser at http://localhost:4200.

Tips:

  • ng serve --open automatically reloads the app whenever code changes.

  • Keep Angular and .NET projects separate for better modularity.

Step 7: Connecting Angular to ASP.NET Core API

Once both projects are running, connect the frontend to the backend.

  1. In Angular, create a service to handle HTTP requests:

ng generate service services/api

  1. Edit api.service.ts:

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

@Injectable({
  providedIn: 'root'
})
export class ApiService {
  private apiUrl = 'https://localhost:5001/api/values'; // Backend API URL

  constructor(private http: HttpClient) {}

  getValues(): Observable<any> {
    return this.http.get(this.apiUrl);
  }
}

  1. Import HttpClientModule in app.module.ts:

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

@NgModule({
  declarations: [...],
  imports: [
    ...,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

  1. Use the service in a component:

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

@Component({
  selector: 'app-root',
  template: `
    <h1>API Data</h1>
    <ul>
      <li *ngFor="let item of values">{{ item }}</li>
    </ul>
  `
})
export class AppComponent implements OnInit {
  values: any[] = [];

  constructor(private apiService: ApiService) {}

  ngOnInit(): void {
    this.apiService.getValues().subscribe(data => {
      this.values = data;
    });
  }
}

Tips

  • Use environment.ts to store backend API URLs for better maintainability.

  • Enable CORS in the ASP.NET Core project for smooth communication.

Step 8: Enabling CORS in ASP.NET Core

Angular and ASP.NET Core run on different ports, so Cross-Origin Resource Sharing (CORS) must be enabled.

  1. Open Program.cs in your ASP.NET Core project.

  2. Add the following configuration:

var builder = WebApplication.CreateBuilder(args);

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

builder.Services.AddControllers();

var app = builder.Build();

app.UseCors("AllowAngular");

app.UseAuthorization();
app.MapControllers();

app.Run();

  1. Restart the backend and test API calls from Angular.

Step 9: Best Practices for Angular + ASP.NET Core Development

  1. Separate Projects: Keep Angular and .NET projects in separate folders or repositories.

  2. Use Environment Variables: Store API URLs and keys in Angular environment.ts.

  3. Follow MVC Principles: Keep controllers, models, and services organized in .NET.

  4. Modular Angular Code: Use modules and reusable components for maintainable frontend code.

  5. Version Control: Use Git to manage code changes effectively.

  6. Testing: Implement unit tests for Angular components and .NET APIs.

  7. Consistent Naming Conventions: Maintain readability and team collaboration.

Step 10: Optional - Using Visual Studio Template for Angular + ASP.NET Core

Visual Studio offers a built-in template that combines Angular and ASP.NET Core:

  1. Open Visual Studio → Create a new project.

  2. Search for ASP.NET Core with Angular template.

  3. Configure project details and create.

This template sets up:

  • Angular frontend project

  • ASP.NET Core backend project

  • Proxy configurations for seamless development

It’s perfect for beginners who want a fully integrated environment without manual setup.

Conclusion

Setting up a development environment for Angular + ASP.NET Core may seem overwhelming at first, but by following these steps, you can create a robust and flexible full-stack environment. Angular provides a powerful framework for building dynamic, interactive SPAs, while ASP.NET Core handles secure, scalable backend operations.

By carefully installing required tools, creating projects, enabling CORS, and following best practices, you can create a productive workflow for full-stack development. This setup is ideal for beginners, intermediate developers, and even enterprise teams aiming for maintainable, scalable web applications.

With the environment ready, you are now prepared to start building your first full-stack Angular + ASP.NET Core application and explore advanced features like authentication, state management, and cloud deployment.

Membership not found