ASP.NET Core 404 for project template with Angular 6 bundled files (wrong dist output directory)

I continued having this issue after taking Setrákus advice on including this line in my Startup.cs file

public void Configure(IApplicationBuilder app, IHostingEnvironment env){    ...    app.UseSpaStaticFiles();}

So after some trial and error, I found the following worked for me:

• Delete the dist folder in ClientApp

• Run an angular build command that specifies the websites base href, for example if my intended destination was http://localhost/ABC then I would run

  'ng build --base-href /ABC/'

This handled the angular application but there is a change needed on the .NET Core side too.

Looking at some similar issues on GitHub it seemed like the call to enable the angular cli middleware UseAngularCliServer() was causing the issue.

To remove the UseAngularCliServer() call You can simply comment it out like below if your just testing, or if this is for a proper hosting environment, change the ASPNETCORE_ENVIRONMENT environment variable to "Production" to skip that if block.

public void Configure(IApplicationBuilder app, IHostingEnvironment env){    ...    if (env.IsDevelopment())    {       //spa.UseAngularCliServer(npmScript: "start");    }}

Angular 6 introduced the feature of multiple projects per workspace (see this), and each project is compiled to a sub-folder inside dist/, however the ASP.NET core angular template works with Angular 5 which compiles immediately inside dist/.

So one way to solve this: open angular.json and change "outputPath" value from dist/<your project name> to simply dist

You don't need to do anything just replace base href inside

/src/index.html

Before

<base href="/">

After

<base href="/YOURSITENAMEHERE/">

Then publish asp.net Core Site.