How to fix Angular Cannot GET ‘/’ Using IIS

Angular has been here to stay and to improve our web applications. I must say that some of the things I like about Angular is the way that data bindings happens. Well I like one more thing which the ability to separate HTML, ts, CSS files. Others, you kinda have to have write HTML and JavaScript in the same file.

Routing in Angular is something that allow us to have a Single Page Application or SPA in a very simple way, especially you have some MVC background.

 you must configure the server to return the application’s host page (index.html) when asked for a file that it does not have

That’s the reason why many of us gets the FAMOUS Cannot get / when we refresh the page when our site us running is our server. The usual fix when developing locally is to use the hash approach, but is not what we want for a production environment. In our case, We are deploying to IIS server and because our app is a SPA we want to fallback to index.html so Angular routes takes the request and display the correct page. We are going to use something call “Rewrite URL” to be more precise we are going to add a new rule to the Rewrite URL module in the IIS. The way we do it is by adding a web.config file as it shows below.

web.config

<?xml version="1.0" encoding="utf-8"?>
<configuration>
<system.webServer>
  <rewrite>
    <rules>
      <rule name="RULE NAME HERE" 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="./index.html" />
      </rule>
    </rules>
  </rewrite>
</system.webServer>
</configuration>

The above file goes with the deployed Angular app. now, just restart the app and go to your favorite browser, go to your app, and fresh the page.
LOOK IT’S THERE!


References
https://angular.io/guide/deployment#server-configuration



Spread the word
  • Yum