Make Angular routes work inside ASP.NET Core 2.0 app

Question

I have an ASP.NET Core 2.0 app and I have Angular 5 app. Those are developed separately (1st in VS2017, 2nd in VS Code). So I set up CD/CI in VSTS and Angular app gets injected into /angularapp/ folder of ASP.NET Core app during the build.

In order to make angular app work when user opens http://domain/angularapp I set up URL rewrite rule in IIS (so when it hits /angularapp it gets rewritten to /angularapp/index.html).

But what about deeper links in Angular app? If I try to open /angularapp/feature I get the 404 error from ASP.NET Core 2.0. Can I workaround this?

Does this answer your question? ASP.NET Core routing ignore Angular 5 routing calls when deep linking — ElasticCode
– ElasticCode, Commented Oct 8, 2020 at 13:01

AlexB · Accepted Answer · 2018-01-05 18:00:20Z

3

Janne-Harju is right. The solution is here - https://code.msdn.microsoft.com/How-to-fix-the-routing-225ac90f. But in order to make it work make sure you have this:

app.UseDefaultFiles(new DefaultFilesOptions { DefaultFileNames = new List<string> { "index.html" }});

answered Jan 5, 2018 at 18:00

AlexB

4,6847 gold badges62 silver badges130 bronze badges

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

1 Comment

Thabiso Mofokeng Over a year ago

I tried app.UseDefaultFiles but it didn't work, until I used the complete solution provided on code.msdn.microsoft.com/How-to-fix-the-routing-225ac90f So, for future reference, will you kindly update your answer so that if the msdn link doesn't work anyone, other users can still get the complete solution.

Adam Hardy · Accepted Answer · 2018-05-07 06:44:20Z

If you're looking for a solution whereby your api is on the same general route e.g. "/api/". And everything else should be routed back to the SPA, then this should work well for you.

app.UseWhen(x => !x.Request.Path.Value.StartsWith("/api"), builder => { builder.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() .UseMvc(); }); app.UseMvc(routes => { routes.MapRoute( name: "default", template: "{controller=Home}/{action=Index}/{id?}"); });

umutesen · Accepted Answer · 2018-06-30 20:55:41Z

The answers given here will partially work but also route requests to index.html if your controllers return a 404 (not found). I am using the following code:

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

This will route all request to index.html, except the ones with extension and api route. Be careful that the api bit is hard-coded and will stop working if you change your resource paths.

Janne Harju · Accepted Answer · 2017-12-05 06:51:36Z

I'm not sure about .net core 2.0 but this works for me with .net core 1.1 https://github.com/JanneHarju/MultiSourcePlayList/blob/076c6e4108cbae3bb5128e7f176ed35a61593922/Startup.cs#L169

 app.Use(async (context, next) => { await next(); if (context.Response.StatusCode == 404 && !Path.HasExtension(context.Request.Path.Value) && !context.Request.Path.Value.StartsWith("/api/")) { context.Request.Path = "/index.html"; await next(); } });

In my repo there is also that else if part for angular routes but I think there is no more use for it anymore (or maybe ever wasn't).

can you please do what actually was in the question? for core 2.0 so even subfolders work in angular 5 app.
So is this /angularapp/feature your angular route or what? Can you provide your app routing module?
My suggestion should work also with .Net Core 2.0 learn.microsoft.com/en-us/aspnet/core/fundamentals/…
Originally I add this to get page refresh to work with angular 2 app. Here is little bit about that code.msdn.microsoft.com/How-to-fix-the-routing-225ac90f
thanks man, let me try to use it. if not I'll create a public repo to show what I mean.

Collectives™ on Stack Overflow

Make Angular routes work inside ASP.NET Core 2.0 app

4 Answers 4

1 Comment

Comments

Comments

5 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

5 Comments

Linked

Related