ASP.NET Core routing ignore Angular 5 routing calls when deep linking

Question

I'm running ASP.NET Core MVC for the API calls. Routing: api/* Also running Angular 5.x with its own routing model.

Things work great running localhost (Core runs port 5000 and angular 4200). But when the project is released on Azure everything runs on port 443.

When the application is released all routing goes through the ASPNET Core routing causes 404 when deep linking.

How do I configure the ApplicationBuilder to redirect the Angular routing to Angular?

update:

Links to API:

/api/event/{id}
/api/event/{id}/thing

Links to angular:

/ --> (home)
/event/{key}
/event/{key}/thing

When traveling from the Home (/) page and using the angular routing the user redirects to /event/{key} which works. When refreshing (F5) the API routing kicks in and returns 404 (because the api doesn't understand).

update2:

This is the fix:

    public void Configure(IApplicationBuilder app, IHostingEnvironment env)
    {
        app.UseMvc();                             // <-- moved to top (was on bottom)
        app.UseStatusCodePagesWithReExecute("/"); // <-- added to redirect to angular
        app.UseDefaultFiles();
        app.UseStaticFiles();
    }

Is your set up a single deployment i.e. your bundled angular code is in a folder inside your api project? If so, do you have any pipeline code to return index.html if the request isn't an api request? — Matt Sugden
– Matt Sugden, Commented Apr 16, 2018 at 12:52
Yes, it is a single deployment. I'm trying to work out how to distinguish the api and index.html code in sturtup.cs. At the moment reading blog.nbellocam.me/2016/03/21/routing-angular-2-asp-net-core but it older version. — Ralf de Kleine
– Ralf de Kleine, Commented Apr 16, 2018 at 13:01
You'll need to create a custom middleware, that executes for each request. If the request doesn't start with /api/, then you return your index.html file. After that, all non api routes should be handled by the Angular router. There is a good explanation here exceptionnotfound.net/asp-net-core-demystified-middleware. — Matt Sugden
– Matt Sugden, Commented Apr 16, 2018 at 13:28
You must be using a pretty outdated template. The newer ASP.NET Core 2.0 templates use webpack bundling and serve the the angular application as static files from wwwroot root folder which is always registered first before the MVC middleware (unless you changed that which would make not much sense) — Tseng
– Tseng, Commented Apr 16, 2018 at 13:41

Ralf de Kleine · Accepted Answer · 2018-04-16 17:58:38Z

5

Adding app.UseStatusCodePagesWithReExecute() fixed the routing problems.

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
    app.UseMvc();                             // <-- moved to top (was on bottom)
    app.UseStatusCodePagesWithReExecute("/"); // <-- added to redirect to angular
    app.UseDefaultFiles();
    app.UseStaticFiles();
}

answered Apr 16, 2018 at 17:58

Ralf de Kleine

11.8k5 gold badges50 silver badges89 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

ASP.NET Core routing ignore Angular 5 routing calls when deep linking

update:

update2:

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

update:

update2:

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related