Angular 8 inside of ASP Net Core was blocked because of a disallowed MIME type (“text/html”)

Question

I'm trying to set up my own angular 8 app to be served from inside of an ASP.Net Core website (so I don't have to deal with cross-site-scripting or having two (sub-)domains, or issues with authentication.

I've built a web app in VS Code, and compiled it to the folder wwwroot/app in my asp net core 3.0 project (I can run the app using ng serve just fine).

I have added this in Startup ConfigureServices()

services.AddSpaStaticFiles(configuration =>
{
 configuration.RootPath = "wwwroot/app";
});

And have this in Configure()

app.UseSpa(spa => {});

This partly works. When I load up the asp.net project the angular app starts to load. But the console is filled with (one for every file specified in the generated index.html):

Loading module from “https://localhost:5001/runtime.js” was blocked because of a disallowed MIME type (“text/html”).

Loading module from “https://localhost:5001/polyfills.js” was blocked because of a disallowed MIME type (“text/html”).

Loading module from “https://localhost:5001/vendor.js” was blocked because of a disallowed MIME type (“text/html”).

Loading module from “https://localhost:5001/styles.js” was blocked because of a disallowed MIME type (“text/html”).

Loading module from “https://localhost:5001/main.js” was blocked because of a disallowed MIME type (“text/html”).

As far as I understand it the angular-cli did not include mime-types on the files when they were "compiled", and thus the web browser does not care for them.

The angular people don't think this is an error/bug and have closed an issue relating to this (although this behavior is different to how Angular 7 did this): https://github.com/angular/angular-cli/issues/10325

Reading this question How to add Mime Types in ASP.NET Core I figured I might be able to do something like this:

var provider = new FileExtensionContentTypeProvider();
provider.Mappings[".js"] = "application/javascript";
provider.Mappings[".html"] = "text/html";
provider.Mappings[".ico"] = "image/vnd.microsoft.icon";


var statFilesOptions = new StaticFileOptions
{
    ContentTypeProvider = provider
};

app.UseSpa(spa =>
{
    spa.Options.DefaultPageStaticFileOptions = statFilesOptions;
});

To add the mime/types to the files. But this did nothing at all.

Any other ideas on how this can be fixed without editing generated files?

Answer 1

The problem was not at all what I expected it to be. The asp.net core app was actually returning the index.html file for all requests as it could not find the javascript files. Hence the error was actually correct.

Changing the <base href="/"> in index.html to <base href="/app/"> solved this partially as it now knew to look for the files in the app folder I placed them in, but made reloads stop working (as the url was wrong).

My solution was to set the output folder of the angular build as the root of /wwwroot/ in the asp net core project. Now it all works.