Location Strategy while hosting on IIS server

Question

I was running my application on local server, it was working fine, when we hosted it, it started working okay untill i refreshed the page and the 404 error occured.

then i came up with the solution of using HashLocationStrategy. It worked very well. But it added up a '#' symbol in my url as 'http://everest.syslogix.ca/#/fastcom/admin-dash'. But it was working very well. After that i wanted to add linkedIn signIn in this application but it required a trusted url without the '#' symbol.

Now what should i do? I've searched all over the internet, tried many solutions but none of them worked for me. I want a URL either without hash which works fine while i reload the page. Or i want some way to enable URL with hash to be stored as a trusted URL on linkedIn.

The initial 404 error page indicates that you missed important URL Rewrite rules to route requests (example https://devblogs.microsoft.com/premier-developer/tips-for-running-an-angular-app-in-iis/), so before using HashLocationStrategy, you should fix that. — Lex Li, Dec 13 '19 at 04:50

score 1 · Answer 1 · answered Dec 13 '19 at 07:16

1

You have to add rewrite rule to web.config file and put it at production build folder, you can also find documentation on same here.

 <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>

answered Dec 13 '19 at 07:16

Savan2396

112
6

I simply should add the web config file? where to add it? in the root folder? before production or after production? – Hur Abbas Dec 13 '19 at 07:38
yes you have to put it in root folder before production & at the time of production build creation it should be automatically added in production build folder as well. – Savan2396 Dec 13 '19 at 07:43
Added the web.config file in src folder of the application. then used ng build --prod. command to create the production build of the application. URL rewrite already installed at IIS. Again not working. the application is hosted at everest.syslogix.ca , is there a need to provide this in the rewrite url? – Hur Abbas Dec 13 '19 at 07:59

score 1 · Answer 2 · answered Dec 13 '19 at 11:46

Solved!!

1- Make a file web.config with the text as :-

<?xml version="1.0" encoding="utf-8" ?>
<configuration>
  <system.web>

  </system.web>
<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>

2- Place this file inside the src folder. 3- Modify your angular.json file to include the web.config file, in the assets tag as :

"

assets": [
              "src/favicon.png",
              "src/assets",
              "src/web.config"
                        ],

4-ng build --prod 5-Publish and enjoy.

Location Strategy while hosting on IIS server

2 Answers2