1

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

URL OK

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

URL NOT OK

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

Iñigo
  • 1,877
  • 7
  • 25
  • 55

2 Answers2

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:

  1. 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

  2. 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

Mario Petrovic
  • 7,500
  • 14
  • 42
  • 62
1

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

teraxxx
  • 55
  • 1
  • 1
  • 10