Tuesday, January 10, 2017

Angular 2 Router On Windows IIS 404 - File or directory not found Solution


Scenario:
When we try to host our Angular 2 on windows IIS , we encounter problem in Angular 2 Routing,
If you try to refresh the same page, or navigate directly to the page using the direct URL ,

You get the error: “ 404 - File or directory not found. The resource you are looking for might have been removed, had its name changed, or is temporarily unavailable. “

Resolution Steps:
        -  Install IIS URL Rewrite Module on your server from here:                          

2      - Configure your Web App:
-  Add Web.config if you don’t have one: 
-        Note: If you use .net or .net core app as angular app you can skip this step (because you already have one).
-        Create Web.config file then add the following,

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



Finally Test your App And happy coding J .

2 comments:

Anonymous said...

Great article ,
Thanks

Anonymous said...

Hey man, you rock!