CODEWITHSUNDEEP
angulariisurl-rewritingangular-routingangular8
Phoenix
Phoenix

Reputation: 295

Angular application not loading with parameters when reloading with IIS URL Rewrite

I have an Angular 8 application configured in my local IIS. I have also installed and configured IIS URL Rewrite. The issue is that the application is loading fine if I access it from the start page. But if at any instance, I reload the application or if I try to access the inner pages using the URL, I get the following error.

Chrome console log error

Please find my IIS URL Rewrite config below :

<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="^/$" negate="true"/>
          </conditions>
          <action type="Rewrite" url="./index.html" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

URL Rewrite in IIS

This is the index.html :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Business Continuity Planning Tool</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.6d575a836e8b4e63af3b.css"></head>
  <body>
    <app-root></app-root>
  <script src="runtime-es2015.d3bc0f0c5758d81e0404.js" type="module"></script><script src="polyfills-es2015.f2e75f3c844d6aea9986.js" type="module"></script><script src="runtime-es5.1b294c6bb1a350f5c4a5.js" nomodule></script><script src="polyfills-es5.c56107a30ff96141ff8f.js" nomodule></script><script src="scripts.e84dbffa93eee937834f.js"></script><script src="main-es2015.b4de925263cc98440efd.js" type="module"></script><script src="main-es5.cb2c1b5748b9aef1ff23.js" nomodule></script></body>
</html>

If I access the application from the home page which doesn't have any URL parameters, its working fine. The issue comes up only in the inner pages where there is a parameter. The reload also works on homepage as there are no parameters. Route config in angular

Home page URL : http://localhost:81/BcpApp/home,

Inner page URL : http://localhost:81/BcpApp/editbcp/5016

I strongly believe that the issue is on the IIS URL rewrite configuration as these issues are not present when I am running the application using node.

Upvotes: 3

Views: 2887

Answers (1)

Andrei
Andrei

Reputation: 12206

<base> tag is important. It shows where is the "start" url part of your application. try rendering base as <base href="/BcpApp/" />. this will make all calls like <script src="/scripts/myscript.js"> as well as angular routing to be prepended with '/BcpApp/' url part

Upvotes: 3

Related Questions