Aspnet Core. Angular. Static page and html5 mode

Question

I am building AngularJs and WebApi application, usin Aspnet Core rc1. I have problem with returning static index.html file. I have tried several methods. The first method was to use such code in Startup.cs

app.UseFileServer();
app.UseMvc();

In this way it works, if I call http://localhost:29838 (root url). But if I go on http://localhost:29838/books ( /books root is my angular root defined using ng-route, and I am using html5 mode) and renew the page, server will return 404 mistake of course.

Then, I read this article https://dzone.com/articles/fixing-html5mode-and-angular .I have tried to use rewrite module method in web.config/ Everything works fine. But I do not like this method. As I have understood it works only with IIS.

Finally, I have tried to use the first way, described in article (when Home/Index returns html file).controller code is:

public ActionResult Index()
{
    return File("~/index.html", "text/html");
}

and Startup.cs is:

routes.MapRoute(
  name: "Default",
  url: "{*.}",
  defaults: new
  {
    controller = "Home",
    action = "Index",
  }
);

Using this approach I have such erros: Refused to load the script 'http://localhost:29838/libs/jquery/dist/jquery.min.js' because it violates the following Content Security Policy directive: "script-src 'unsafe-inline'". And I can not overcome this. What am I doing wrong?

Answer 1

Try to use AspnetCore.SpaServices, they provide you legit HTML5 spa-fallback. Something like this:

app.UseStaticFiles();
app.UseMvc(routes =>
{
    routes.MapRoute(
        name: "default",
        template: "{controller=Home}/{action=Index}/{id?}");

    routes.MapSpaFallbackRoute(
        name: "spa-fallback",
        defaults: new { controller = "Home", action = "Index" });
});

This library fix all your issues with SPA-fallback.

Answer 2

The SpaServices mentioned by @Andrei is great if you are using an MVC page that has server side render or some server logic.

If you don't have any logic in the server side, and you don't need it, you could just do the following:

app.Use(async (context, next) => 
{ 
    await next(); 
    if (context.Response.StatusCode == 404 && !Path.HasExtension(context.Request.Path.Value)) 
    { 
        context.Request.Path = "/index.html"; 
        await next(); 
    } 
}) 
.UseDefaultFiles(new DefaultFilesOptions { DefaultFileNames = new List<string> { "index.html" } }) 
.UseStaticFiles()

What the snippet does is look for pages that don't exist on the server side, and redirect them to '/index.html'. If you have a different entry point file, you may change the Url. Also, if the file requested has extension, it is served in order to allow javascript, css, html etc to be rendered on the client.

You can also take a look here: https://code.msdn.microsoft.com/How-to-fix-the-routing-225ac90f

Answer 3

Finally. I have found the solution. For security I use OpenIdConnect.Server. In sample project author used NWebsec.Middleware. And I have just copied csp settings from this sample project

 app.UseCsp(options => options.DefaultSources(configuration => configuration.Self())
                                     .ImageSources(configuration => configuration.Self().CustomSources("data:"))
                                     .ScriptSources(configuration => configuration.UnsafeInline())
                                     .StyleSources(configuration => configuration.Self().UnsafeInline()));

Notice, that authore misspelled calling .Self() method after ScripSources(). And I have not noticed that !!! Be carefull with copy and paste