← Back to Articles         
Can Angular and ASP.NET Core be deployed separately?

Can Angular and ASP.NET Core be deployed separately?

Published on 02 Oct 2026     6 min read Angular
Deployment

Can Angular and ASP.NET Core be deployed separately?

Yes. Angular and ASP.NET Core can be deployed completely separately, and this is a very common architecture.

Browser
   |
   ↓
Angular Application
https://www.example.com
   |
   | HTTPS / JSON
   ↓
ASP.NET Core Web API
https://api.example.com
   |
   ↓
SQL Server

What does separate deployment mean?

Angular and ASP.NET Core are treated as independent applications.

For example:

Angular
   ↓
Build: ng build
   ↓
dist/
   ↓
Frontend Server


ASP.NET Core
   ↓
Build/Publish: dotnet publish
   ↓
publish/
   ↓
Backend Server

They don't even have to run on the same physical or virtual server.

For example:

Server 1
────────────────────────
Angular
www.example.com


Server 2
────────────────────────
ASP.NET Core Web API
api.example.com


Server 3
────────────────────────
SQL Server

Full Simple Sample

Suppose Angular runs at:

https://www.example.com

and ASP.NET Core runs at:

https://api.example.com

Angular environment configuration

export const environment = {
  production: true,
  apiUrl: 'https://api.example.com/api'
};

Angular service

import { inject, Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { environment } from '../environments/environment';

@Injectable({
  providedIn: 'root'
})
export class ProductService {

  private http = inject(HttpClient);

  getProducts() {
    return this.http.get(
      `${environment.apiUrl}/products`
    );
  }
}

The browser sends:

GET https://api.example.com/api/products

ASP.NET Core Web API

ProductsController.cs

using Microsoft.AspNetCore.Mvc;

[ApiController]
[Route("api/[controller]")]
public class ProductsController : ControllerBase
{
    [HttpGet]
    public IActionResult Get()
    {
        var products = new[]
        {
            new { Id = 1, Name = "Laptop", Price = 50000 },
            new { Id = 2, Name = "Mouse", Price = 1000 }
        };

        return Ok(products);
    }
}

CORS configuration

Because:

https://www.example.com

and:

https://api.example.com

are different origins, browser CORS rules apply.

Configure ASP.NET Core:

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddControllers();

builder.Services.AddCors(options =>
{
    options.AddPolicy("AngularApp", policy =>
    {
        policy
            .WithOrigins("https://www.example.com")
            .AllowAnyHeader()
            .AllowAnyMethod();
    });
});

var app = builder.Build();

app.UseHttpsRedirection();

app.UseCors("AngularApp");

app.UseAuthorization();

app.MapControllers();

app.Run();

Now the API allows requests from:

https://www.example.com

Deployment process

Angular

Build:

ng build --configuration production

Generated output will be under dist, for example:

dist/
└── my-app/
    └── browser/
        ├── index.html
        ├── main-XXXXX.js
        ├── styles-XXXXX.css
        └── chunk-XXXXX.js

Deploy those frontend files to your frontend/static web server.

ASP.NET Core

Publish:

dotnet publish -c Release

Deploy the published ASP.NET Core files to the API server.

So:

Angular Source
      ↓
   ng build
      ↓
    dist/
      ↓
Frontend Server


ASP.NET Core Source
      ↓
 dotnet publish
      ↓
   publish/
      ↓
Backend Server

Complete Request Flow

Suppose the user opens:

https://www.example.com/products

The flow is:

Browser
   ↓
Angular Application
   ↓
Products Component
   ↓
ProductService
   ↓
GET https://api.example.com/api/products
   ↓
ASP.NET Core
   ↓
ProductsController
   ↓
Database
   ↓
JSON Response
   ↓
Angular
   ↓
Products displayed

Example API response:

[
  {
    "id": 1,
    "name": "Laptop",
    "price": 50000
  },
  {
    "id": 2,
    "name": "Mouse",
    "price": 1000
  }
]

Can they be on different servers?

Yes.

For example:

                    Internet
                       |
            ┌──────────┴──────────┐
            ↓                     ↓
        Server 1               Server 2
        Angular               ASP.NET Core
        Frontend                 API
            |                     |
            |                     ↓
            |                  Server 3
            |                 SQL Server
            |                     ↑
            └────── HTTPS ────────┘

They can also be deployed using completely different hosting technologies.

For example:

Angular
   ↓
Static hosting / CDN

ASP.NET Core
   ↓
Azure App Service / IIS / Container

SQL Server
   ↓
Azure SQL / SQL Server

Angular doesn't care where ASP.NET Core is hosted as long as it can reach the API URL and the server is configured appropriately.

Why deploy them separately?

One major advantage is independent deployment.

Suppose only Angular changes.

You can:

Change Angular
      ↓
ng build
      ↓
Deploy Angular

without redeploying the ASP.NET Core API.

Similarly:

Change ASP.NET Core
      ↓
dotnet publish
      ↓
Deploy API

without rebuilding Angular, assuming the API contract remains compatible.

Independent scaling

Another major advantage is independent scaling.

Suppose:

Angular
10,000 requests

API
1,000,000 requests

You may scale the backend independently:

Angular
   |
   ↓
Frontend/CDN

ASP.NET Core
   |
   ↓
Load Balancer
   |
   ├── API Server 1
   ├── API Server 2
   ├── API Server 3
   └── API Server 4

The frontend deployment doesn't need to scale in exactly the same way as the API.

Separate vs Combined Deployment

Separate deployment Combined deployment
Angular hosted separately Angular served by ASP.NET Core
API hosted separately API and frontend share host
Often two deployment pipelines Can use one deployment pipeline
CORS often required Same-origin setup can avoid CORS
Independent scaling easier Simpler deployment for smaller systems
Independent releases easier Frontend/backend releases can be coupled
Angular uses full API origin or gateway Angular can use /api/...

For example, separate:

www.example.com
        ↓
     Angular
        ↓
api.example.com
        ↓
 ASP.NET Core

Combined:

www.example.com
       ↓
 ASP.NET Core
    ↙      ↘
 Angular    API
wwwroot    /api

Key Points

  1. Yes, Angular and ASP.NET Core can be deployed separately.
  2. Angular is the frontend/client application.
  3. ASP.NET Core Web API is the backend application.
  4. Angular communicates with ASP.NET Core using HTTP/HTTPS.
  5. They can run on different servers, domains, containers, or cloud services.
  6. Angular is built using:
ng build --configuration production
  1. ASP.NET Core is published using:
dotnet publish -c Release
  1. If the browser calls the API across different origins, configure CORS appropriately.
  2. Separate deployment allows independent deployment and scaling.
  3. Angular should never connect directly to SQL Server.

Interview Questions and Answers

1. Can Angular and ASP.NET Core be deployed separately?

Yes. Angular can be deployed to a frontend/static host while ASP.NET Core Web API is deployed to a separate backend server. Angular communicates with the API over HTTP/HTTPS.

2. Can Angular and ASP.NET Core run on different servers?

Yes.

Angular → Server 1
ASP.NET Core → Server 2
SQL Server → Server 3

They communicate over the network.

3. How does Angular know the ASP.NET Core API address?

Usually through application configuration, for example:

export const environment = {
  apiUrl: 'https://api.example.com/api'
};

4. Is CORS required when Angular and ASP.NET Core are separate?

If the browser sees them as different origins, then CORS applies.

For example:

https://www.example.com
https://api.example.com

The API should allow the required frontend origin.

5. What is the main advantage of separate deployment?

It provides independent deployment and scaling of frontend and backend applications.

6. Does Angular need an ASP.NET Core project reference?

No. In a separately deployed architecture, Angular does not reference the ASP.NET Core project.

The relationship is simply:

Angular
   ↓ HTTP/HTTPS
ASP.NET Core API

7. Can Angular be deployed without ASP.NET Core on the same server?

Yes. Angular's generated browser files are static assets and can be hosted independently.

8. What is a strong short interview answer?

Yes. Angular and ASP.NET Core can be deployed separately. Angular is built into frontend assets using ng build, while ASP.NET Core Web API is published independently using dotnet publish. Angular then communicates with the API over HTTPS. If they use different origins, the ASP.NET Core API must be configured with the appropriate CORS policy.

Keep Learning - More From This Category

← Back to Articles