Angular and IIS WebApplication (or virtual directory)

Question

We have webserver with an IIS website and an IIS Web Application underneath. The web application's root is: http://website/webapplication/. When deployed I get the following error in the browser:

http://website/app/app.component.html 404 (Not Found)

app/app.component.html 404 (Not Found)

My component:

@Component({
    selector: "app",
    templateUrl: "./app/app.component.html"
})

The file app.component.html does indeed not exist under /app/app.component.html, but it does exist at: /webapplication/app/app.component.html.

So, my conclusion is that Angular only works when in the root of a website. In the html header I have set the tag to: <base href="/webapplication/">, but that doesn't help.

It seems like a normal setup, I can't believe the template resolving in Angular fails, I must be missing something... Does anyone know a solution to this?

Answer 1

I couldn't use most of the suggestions on the web regarding fixing this issue, I have no idea why. I played around with settings util I got it working. Here is what I used:

• IIS 10.0
• Angular 6.1.0 project
• Virtual Directory converted to application
• App Pool: No Managed Code

webconfig:

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <directoryBrowse enabled="true" />
    <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="/myapp/index.html" />
      </rule>
    </rules>
    </rewrite>
  </system.webServer>
</configuration>

my root index.html file:

<base href="./">   <---- make sure you have the dot in there!