Setup IIS Routing to allow Angular Routing to work

Question

I deployed an angular application (front-end app) in IIS server and deploy an asp.net web API application (back-end app) on another server (using different server for angular application and asp.net web API application).

When I go to the angular application URL I can access my web page. When I click on menu items, the angular router routes me to the requested URL but when I enter requested URL in browser I get an IIS 404 not found error.

I have no idea what is the problem.

• Lex Li: If you don't have a URL Rewrite rule, then it is impossible to work devblogs.microsoft.com/premier-developer/…

Answer 1

This happens because IIS does not know anything about the client-side routes, therefore, you have to write a rewrite rule which says to always direct the traffic to unknown URLs to the Angular application's index file. Angular will look after serving the correct route when this is done.

Answer 2

IIS is trying to route your request. Set IIS to redirect to root. After IIS redirects to root, Angular Routing will pick up the rest of the route.

Here is what I have in my Web.config.

<rule name="Force Index.html" enabled="true" stopProcessing="true">
 <match url="(.*)" />
 <conditions>
 <add input="{REQUEST_URI}" matchType="IsDirectory" negate="true" />
 <add input="{REQUEST_URI}" matchType="IsFile" negate="true" />
 <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
 <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
 </conditions>
 <action type="Rewrite" url="/" />
</rule>