Angular App Url always saying 404 on refresh after deploy on IIS

Question

I deployed an application developed using angular 6 on IIS of windows server. Now I am facing one issue that on navigating the app if I am refreshing the page then it says 404 - File or directory not found. I looked at the posts related to this issue and tried to apply fix. but no luck. I do not want to use # with my urls. I just want to use urls simply like http://example.xyz.com/detail/12

If I am using # then its fine but I don't want to use #.

I tried to add a web.config as well, but no luck. Can any one help here how to fix this issue so that on refresh same page can be opened that I want to reload.

 <?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="./index.html" />
      </rule>
    </rules>
  </rewrite>
</system.webServer>

</configuration>

You should configure iis to route to index.html on unknown urls, since it thinks your angular route is a folder on server, and returns 404 since in reality there is no such folder — Oleksandr Poshtaruk
– Oleksandr Poshtaruk, Commented Dec 4, 2018 at 12:07
how it can be done? plz explain. as index.html already there in default documents in IIS — Filmjamr Movies
– Filmjamr Movies, Commented Dec 4, 2018 at 13:18
I am not iis master but like this i guess stackoverflow.com/a/43787391/6528560 — Oleksandr Poshtaruk
– Oleksandr Poshtaruk, Commented Dec 4, 2018 at 13:24

Filmjamr Movies · Accepted Answer · 2018-12-07 11:02:10Z

53

Follow this link to fix this issue Angular 2 Hosted on IIS: HTTP Error 404 or just

Step 1: Install IIS URL Rewrite Module

Step 2: Add a rewrite rule to web.config

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

answered Dec 7, 2018 at 11:02

Filmjamr Movies

9972 gold badges8 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Krishnan Prasad Over a year ago

The above works even on Azure hosting, just need to add web.config file in "wwwroot" directory, Default web.config file will not available in on angular build --prod, So manually we need to add the web.config file

Krunal Jethva Over a year ago

Hey I tried your weboconfig but always returns

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

Collectives™ on Stack Overflow

Angular App Url always saying 404 on refresh after deploy on IIS

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related