This article lists out some of the common routing issues we will get, when working with web applications built with angular framework, and hosted on IIS (Internet Information Services).
IIS has its own routing system and same will be applied to ASP.Net Web API, the pages in web forms, and to actions in MVC. In the same way angular has a routing module with it’s own set of rules. Angular routing module makes sure that there won’t be any page reloads while navigating among the routes.
So when we host angular in IIS, angular routing will be failed, because IIS don’t understand the angular routing and will be looking for a resource which matches the route.
One quick solution for this problem is that, use Hash-based URL in angular. We can do that by passing an additional parameter as { useHash: true } to the RouterModule.forRoot function in either in App Module or in Routing Module (as per your app). But using this approach will change the way how the URLs appear in the browser. There will be an # symbol in between the base path and the angular routing path.
The another solution to this problem, which would not use hash-based URLs is IIS URL rewriting. We can do this in either in IIS Manager or in Web.config file of the web application.
You can check here for configurations for other web servers.
After URL rewriting, IIS routing will not look for matches and instead just redirect to base path.
The second solutions works good, if the angular web application is the one and only hosted in that IIS Site. If we have any sub sites inside that, then the configuration added for URL rewrite will be applied to all sub sites also, which will be good if those sub sites are also angular / does not require IIS routing.
What if the sub sites are MVC or asp.net core? then the routing won’t happen for the those. To get over this, we can write additional rule to allow IIS routing for all of the sub sites. This rule should be written on top of the “Angular Routes” in the above picture, but inside the rules tag.
Thanks,Srini.
