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

Question

I've created a ASP.NET Core application with the Angular project template https://docs.microsoft.com/en-US/aspnet/core/client-side/spa/angular?view=aspnetcore-2.1&tabs=visual-studio

Generated output

When deploying on IIS, the base href is <base href="/">

And the path of the scripts inside the generated dist/index.html are :

<script type="text/javascript" src="runtime.js"></script>
<script type="text/javascript" src="polyfills.js"></script>
<script type="text/javascript" src="vendor.js"></script>
<script type="text/javascript" src="main.js"></script>

Problem : 404 errors

However C# Startup.cs should correctly set the path to the output directory

The ASP.NET Core project should be aware that these files are in the ClientApp/dist directory because of this code :

    public void ConfigureServices(IServiceCollection services)
    {
        services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_1);

        // In production, the Angular files will be served from this directory
        services.AddSpaStaticFiles(configuration =>
        {
            configuration.RootPath = "ClientApp/dist";
        });
    }

Why the base path isn't set correctly ?

The project runs on IIS, we can see the background initialisation message of index.html appear correctly, however as shown in the picture, all resources are loaded on the root "/" of the server, so they get 404's.

If I try to load http://{SERVERIP}/{PROJECTNAMEHERE}/runtime.js I see that it works, so I guess that it's probably only a matter of base href.

How to set that base href dynamically from ASP.NET Core?

Answer 1

I wanted to expand a bit more on the answer by @tahasultantemuri which I think is correct. The only issue is if the index.html file is edited match the production location of your site then after publishing it will have to be changed back or running on local host will no longer work. To avoid this, modify your .csproj file as follows

Before

<Target Name="PublishRunWebpack" AfterTargets="ComputeFilesToPublish">
   ...
   <Exec WorkingDirectory="$(SpaRoot)" Command="npm run build -- --prod" />
   ...
</Target>

After

<Target Name="PublishRunWebpack" AfterTargets="ComputeFilesToPublish">
   ...
   <Exec WorkingDirectory="$(SpaRoot)" Command="npm run build -- --prod --base-href /site name/>
   ...
</Target>

The local host version of the index.html file will be retained for debugging.

Answer 2

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.

Answer 3

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");
    }
}