ASP.Net Core + Angular 2 app /home routing

Question

I\'ve been fighting with this for a while now and decided to write a post.

I\'m building a simple Single Page Application using VS2017 on ASP.Net Core 5.0 and Angula

Answer 1

Is there a reason why you are using asp.net with angular? I HIGHLY suggest you using angular cli. Importing libraries and publishing is very difficult with angular + asp.net.

Using angular cli will also always be "angular"

Answer 2

I think that what is troubling you is that you wish to have Single App and have Angular doing client routing and posting WEB.API calls back to .NET Core Web API. So, once you are on some page like www.example/subpage, and you press F5 to reload the same, avoid being kicked back to the homepage.

The solution is to create two MVC routes. The first route will deal with redirecting a call to Web.API and the second one will accept any Angular URL request, and just ignore everything and forward the call to the Home controller.

To achieve that you need:

1. In Views\Home\Index.cshtml include your Angular component tag (my is app-root)
2. In Startup.cs, just before "app.Run" add the following code
app.UseMvc(cfg => { cfg.MapRoute( "API", "api/{controller=*}/{action=*}/{id?}"); cfg.MapRoute( "Default", // Route name "{*catchall}", // URL with parameters new { controller = "Home", action = "Index" }); });

Answer 3

I took different approach and rebuilt my application using the tutorial found under this link.

It is a solution where you first create ASP.NET CORE Web App API interface and install Angular over it. A little bit of 'engineering', works directly off Visual Studio and takes little time to set up.