3

I was facing issue in routing after I hosted my Angular 8 application on IIS. Initially I was only working on Chrome and there was IE compatibility issue which I fixed by following https://github.com/angular/angular-cli/issues/14455

Then I fixed the issue with routing in Chrome by following Get Angular2 routing working on IIS 7.5

Now the thing is I face the same issue I faced on Chrome in IE. enter image description here As you can see in the image above, I am accessing the application hosted in the IIS but the URL for home page is different for IE and Chrome. Please find my web.config below :

    <?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" />
            <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
          </conditions>
          <action type="Rewrite" url="./" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>

</configuration>

Index.html : 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>test</title>
    <base href="./" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="icon" type="image/x-icon" href="favicon.ico" />
  <link rel="stylesheet" href="styles.39b1e75bbbe936737c09.css"></head>
  <body>
    <app-root></app-root>
  <script src="runtime-es2015.858f8dd898b75fe86926.js" type="module"></script><script src="polyfills-es2015.2aa54f736a6dab369b77.js" type="module"></script><script src="runtime-es5.741402d1d47331ce975c.js" nomodule></script><script src="polyfills-es5.295ea8bc5f78de650878.js" nomodule></script><script src="scripts.e84dbffa93eee937834f.js"></script><script src="main-es2015.84b45d5a04fc8fb79ee4.js" type="module"></script><script src="main-es5.a33c40a78828de82c0fb.js" nomodule></script></body>
</html>

enter image description here When I reload the page or manually try to navigate the route, I get 404 error. enter image description here

I am not familiar with URL rewrite and not sure if we should have a specific rule for IE?

Phoenix
  • 285
  • 9
  • 28
  • 1
    Try to remove the last condition from your rule and again try to check the issue with IE. Ref: https://devblogs.microsoft.com/premier-developer/tips-for-running-an-angular-app-in-iis/ and https://jasonwatmore.com/post/2017/02/24/angular-2-refresh-without-404-in-node-iis – Deepak-MSFT Jul 05 '19 at 12:27
  • Did it, but no change. – Phoenix Jul 05 '19 at 12:52
  • try to clear browser history. check log rewrite option in iis url rewrite rule [image](https://imgur.com/sYMK993) and run failed request tracing in iis.what is your folder structure of the angular site?is your index file under any subfolder? – Jalpa Panchal Jul 08 '19 at 08:09
  • 1
    https://imgur.com/a/AlvFky9 please refer the images. Actually it is working fine if i place the project outside 'default web site' folder in IIS. But my client wants it inside the folder so I need a solution for this scenario. – Phoenix Jul 08 '19 at 11:03
  • iis url rewrite rule is not for specific browser it applies to the whole site and all the browser. you need to clear browser history and cache. – Jalpa Panchal Jul 09 '19 at 05:27
  • I already tried that. FYI, in IE Edge it is working fine as expected and issue is only with IE11 – Phoenix Jul 09 '19 at 07:00

1 Answers1

1

I'm seeing a similar problem. Try adding a trailing slash to the URL in IE and see if that redirects properly. It seems that Chrome adds the trailing slash automatically while IE does not. And URL rewrite depends on the trails slash as a delimiter or something. As a temporary fix I have setup a default HTML page to redirect to the URL with the trailing slash. I am still looking for a solution within URL rewrite. In your example you could create a site for home and put an index.htm there that redirects to '/bcp/home/'

John Titus
  • 11
  • 1
  • If you notice in the screenshots I shared, in IE window you will see 'localhost/home' and in Chrome it is 'localhost/bcp/home'. I already tried with a trailing slash and it is not making any difference. – Phoenix Oct 20 '19 at 09:16
  • https://stackoverflow.com/questions/59872738/angular-application-not-loading-with-parameters-when-reloading-with-iis-url-rewr still issue is not fixed. Can refer the question above for a more clarified issue detail. thanks – Phoenix Jan 23 '20 at 08:19