HTML5 routing in Angular2 App with ASP.Net Core MVC and ASP.Net Web Api

Question

I am develop Angular2 App with ASP.Net Core MVC and ASP.Net Web Api.

Here is my basic architecture.

ASP.Net Core MVC Project (MyProject.Web)

Nuget, npm, and bower is used for dependencies. Bower is used to copy the npm dependencies from node_modules to wwwroot/libs/
Home/Index controller's action delivers the first page which loads Angular2 and other dependencies.
Templates are loaded from ActionMethods i.e. Home/About
SystemJS loads the modules.
Angular2's http service calls the ASP.Net Web Api Project (a separate project than mvc)

ASP.Net Web Api Project (MyProject.Api) - Each Controllers is designated for CRUD operations of an entity, and responses to Angular2's http

Problem: I am not able to use HTML5 routing and am forced to hash routing because html5 routing calls the server and my MVC project does not have the corresponding controller. So server doesn't return anything.

You should be able to configure your server to support HTML5 pushState. It just needs to return index.html for unknown URLs — Günter Zöchbauer
First, there is no index.html, as mentioned above the action methods are used for delivering html. Second, What if my AngularApp is requesting a resource (i.e. image, css, js file etc) which exists but is available no more and I want to display an error. But in your solution, the index action is returned? How to deal with it? — Super Coder
You can return a 404 response (not rewrite to index.html) for requests that try to access resources in the asset directory (or distinguish by other criteria) — Günter Zöchbauer

Lukasz Mk Lukasz Mk · Accepted Answer · 2017-01-14T22:05:29

Problem: I am not able to use HTML5 routing and am forced to hash routing because html5 routing calls the server and my MVC project does not have the corresponding controller. So server doesn't return anything.

Adding # into route path is probably the most common solution in a case like you, but...

Do you have any particular reason for using MVC with Angular?

In my opinion, you don't need MVC - you could just create empty ASP.NET Core project and add into your HTML/Angular app - clean, simple, comfortable and no conflicts between MVC and Angular ;)

Add your files (including index.html) into wwwroot and update your Startup.cs file:

public class Startup
{
    public void ConfigureServices(IServiceCollection services)
    {
    }

    public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
    {
        loggerFactory.AddConsole();

        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
        }
            app.UseDefaultFiles(); <- Add this line before UseStaticFiles
            app.UseStaticFiles();            
    }
}

Please find more information:

HTML5 routing in Angular2 App with ASP.Net Core MVC and ASP.Net Web Api

3 Answers