Angular 6 Deployment on IIS 7, Manual URL/ Refresh Page Error

 If you have successfully built and deployed Angular application on IIS and while refreshing page, if it shows Http Error 404 — Not Found then your IIS server needs to be configured properly by adding a rewrite rule so that all angular routes fall back to index.html. Following is a step-by-step deployment guide of angular application on IIS.

1.First decide whether the application will be located at the root in IIS (e.g. http://servername) or in a path below the root (e.g. http://server-name/my-app).

2. If deploying to a path beneath the root, build the angular application with change in base-href option in index.html. (Example: <base href=”/my-app/”>) Or if deploying to the root then base-href option in index.html will be as: <base href=”/”>

3. Copy the generated ‘dist’ folder in ‘wwwroot’ and create an IIS web application and set the physical path to the location of the dist folder. (In this case root folder is the physical path you provided on creating an IIS web application).

4. If there is no URL Rewrite Module in IIS Manager like below screenshot then you would be required to install Microsoft URL Rewrite Module into IIS from the link i.e:

URL Rewrite Module 2.0 for IIS (x64)

URL Rewrite Module 2.0 provides a rule-based rewriting mechanism for changing requested URL’s before they get processed…

www.microsoft.com

5. After installing, you will get URL Rewrite icon on IIS Manager.

6. Add web.config file with a URL Rewrite Rule.

<?xml version=”1.0" encoding=”UTF-8"?>

<configuration>

<system.webServer>

<rewrite>

<rules>

<rule name=”Angular Routes” stopProcessing=”true”>

<match url=”.*” />

<conditions logicalGrouping=”MatchAll”>

<add input=”{REQUEST_FILENAME}” matchType=”IsFile” negate=”true” />

<add input=”{REQUEST_FILENAME}” matchType=”IsDirectory” negate=”true” />

</conditions>

<!--<action type=”Rewrite” url=”/my-app/” /> -->

<action type=”Rewrite” url=”/” />

</rule>

</rules>

</rewrite>

</system.webServer>

</configuration>

7. Now start website and browse.

Note:

Make sure the web.config is correct and the URL property in the web.config matches both the base href in the index.html and the web application or virtual directory alias if necessary.