SpaProxy or SpaServices.Extensions - which to use for building ASP NET Core app with Angular SPA

Question

In a past I created Angular SPA with ASP NET Core using Microsoft.AspNetCore.SpaServices. Now it seems to be obsolote, and we rather shall use Microsoft.AspNetCore.SpaServices.Extensions. But when we create project from template, it uses something called SpaProxy.

I'm ultra confused what shall I use: Microsoft.AspNetCore.SpaServices.Extensions or SpaProxy. I can't find any documentation about what differentiate them.

I want to have my backend and frontend (Angular SPA) at the same port, e.g 443. I think (but I'm not sure) that I wouldn't be able to use SpaProxy in this scenario, because it uses two distinct ports for backend and frontend, and redirects predefined endpoint calls at frontend port to backend port.

The scenario seems to possible to handle by using the Microsoft.AspNetCore.SpaServices.Extensions, because in production I just use static files from ClientApp/dist/clientapp or something like this.

But I'm still confused and don't know which to choose, what differentiate them, and especially how the SpaProxy works.

I use NET7

Answer 1

Having recently upgraded form Angular 16 -> 18 and from .net 7 -> 8 it seems to me that Microsoft.AspNetCore.SpaProxy is the most recent incarnation of the .net core SPA support and the only one that can support Angular 18s new build system.

As noted in the comments: Microsoft.AspNetCore.SpaProxy proxies all the traffic through one single port (as did the previous solutions) but does this using a "standalone" (reverse) proxy rather than a middleware. That is the reason for the redirect you get when browsing to the URL indicated by dotnet run.

Migrating from SpaServices.Extensions to Microsoft.AspNetCore.SpaProxy

Rather then being configured in as middleware when creating the WebHostBuilder the SpaProxy is configured entirely in the csproj.

remove SpaServices.Extensions

remove the package reference to Microsoft.AspNetCore.SpaServices.Extensions from your csproj

- <PackageReference Include="Microsoft.AspNetCore.SpaServices.Extensions" Version="7.0.12" />

also delete the app.UseSpa block from your Startup.cs / Program.cs that looks similar tho this:

app.UseSpa(spa =>
{
    spa.Options.SourcePath = "Client";

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

also loose using Microsoft.AspNetCore.SpaServices.AngularCli;

add SpaProxy

install the package like this

dotnet add package Microsoft.AspNetCore.SpaProxy

add these three nodes to the PropertyGroup in your csproj that contains the TargetFramework

<PropertyGroup>
  <TargetFramework>net8.0</TargetFramework>
  ...
  <SpaRoot>Client\</SpaRoot>
  <SpaProxyServerUrl>https://localhost:44460</SpaProxyServerUrl>
  <SpaProxyLaunchCommand>npm start</SpaProxyLaunchCommand>
    ...
</PropertyGroup>

then edit your launchSettings.json (in the Properties directory) and add the environment variable ASPNETCORE_HOSTINGSTARTUPASSEMBLIES like this

"MyProject": {
  "commandName": "Project",
  ...
  "environmentVariables": {
    "ASPNETCORE_ENVIRONMENT": "Development",
    "ASPNETCORE_HOSTINGSTARTUPASSEMBLIES": "Microsoft.AspNetCore.SpaProxy"
  }
}

now when you execute dotnet run the SpaProxy starts and you get the initial "redirect when ready" page