Angular SPA routes on ASP.NET Web API project

Question

Created an Angular SPA with some routes on it like:

/messages
/messages/:id

With ng serve I can access to that pages with the URL localhost:4200/messages and localhost:4200/messages/:id

Then I built the solution and copied the generated content to an ASP.NET Web API 2 project. On the project controller, I set the default route ("/") to return the SPA index.html file, so if I run the app I get the SPA with the URL: localhost:51384

From the links on the page I get to the messages/:id page, and the showing URL on the browser is:

localhost:51384/messages/:id

From Angular doc I know that the shown URL is local and is not sent to the server. If I try to access to that URL manually, I get an error:

HTTP Error 404.0 - Not Found

That's obvious because on the WebAPI controller there is no rule for /messages/:id.

I am aware that I have a concept problem, but is there a way to access to the SPA routes with the WebAPI's URL? If not, what is the correct way to integrate a SPA into a .NET project and access to the SPA routes? Should they be accessed only through the page and not through the URL?

Thanks in advance, feel free to comment or vote positive/negative

Why not just use the UseSpa middleware?

Pieterjan
– Pieterjan

2023-04-29 01:48:11 +00:00
Commented Apr 29, 2023 at 1:48 — Pieterjan
– Pieterjan, Commented Apr 29, 2023 at 1:48

Mario Petrovic · Accepted Answer · 2019-08-21 09:08:09Z

1

So you are on a good mindset for solving this. Yes, server is trying to access messages/12312 in its controllers, and it cannot find it.

So you have 2 solutions:

Changed to # way of Angular routing which doesnt require you to modify server. To do that you can see an easy setup for hash strategy here: https://angular.io/guide/router#appendix-locationstrategy-and-browser-url-styles
This option will need you to modify your server settings and intercept all routes. Refer to this article: ASP.Net Core + Angular 2 app /home routing

answered Aug 21, 2019 at 9:08

Mario Petrovic

8,44516 gold badges45 silver badges66 bronze badges

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

1 Comment

Iñigo Over a year ago

Solved with the hash strategy. Thanks!

teraxxx · Accepted Answer · 2019-08-21 09:49:00Z

1

Use HashLocationStrategy explained here: https://angular.io/guide/router#appendix-locationstrategy-and-browser-url-styles

answered Aug 21, 2019 at 9:49

teraxxx

551 gold badge2 silver badges10 bronze badges

Collectives™ on Stack Overflow

Angular SPA routes on ASP.NET Web API project

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related