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?

did you figure out the solution ? I am having the same issue thanks — VR1256
– VR1256, Commented Dec 21, 2016 at 20:07

Post Impatica · Accepted Answer · 2018-11-07 20:23:33Z

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!

Community · Accepted Answer · 2017-05-23 11:54:14Z

0

Although you can use Url Rewrite and get this working, the only long-term solution to this problem is to use HashLocationStrategy.

Angular 2.0 router not working on reloading the browser

edited May 23, 2017 at 11:54

CommunityBot

11 silver badge

answered Dec 6, 2016 at 18:46

jkyoutsey

2,0612 gold badges22 silver badges32 bronze badges

Collectives™ on Stack Overflow

Angular and IIS WebApplication (or virtual directory)

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related