Angular 5 : Deploy app to IIS under nested folder

Question

I am using Angular 5.2 and deployed in my localhost IIS server and it is working fine.

my localhost URL looks like this :- http://localhost/DEV

DEV is the virtual directory in my localhost IIS server. Everything is working fine with the above URL.

Now i want to add another nested VD inside the DEV as childApp. I want my app to work as http://localhost/DEV/childApp.

So I changed the index.html content to have the base href like this :-

<base href="/DEV/childApp/">

And also updated the web.config file for the URL rewrite rule to be:-

From

<action type="Rewrite" url="./index.html" />

TO

<action type="Rewrite" url="/DEV/childApp/" />

Web.config looks like this:-

<?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="/DEV/childApp/" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

But it is throwing me the error saying :-

HTTP Error 500.52 - URL Rewrite Module Error. Cannot add duplicate collection entry of type 'rule' with unique key attribute 'name' set to 'Angular Routes'

Please suggest how to fix the web.config for URL rewriting or other place.

Possible duplicate of URL Rewrite error with Web Applications — Daniel W Strimpel
This is different and has to do with Angular application & its base href. — Karan
Not if that is the error that you are getting. That is not an Angular error but rather an IIS error. Did you add the <clear /> as the answer gave? — Daniel W Strimpel

Karan Karan · Accepted Answer · 2018-08-06T15:47:40

Adding <clear /> to the web.config is the solution.

<configuration>
  <system.webServer>
    <rewrite>
      <rules>
       <clear /> <!--Imperative Step, otherwise IIS will throw err-->
        <rule name="Angular Routes" stopProcessing="true">
          <match url=".*" />
          ............
          ..........

Angular 5 : Deploy app to IIS under nested folder

1 Answers