IIS 8.0 Not Looking in Subfolder

Question

I have an application hosted within another website using IIS 8.0 like so (In case it's relevant, it's an Angular 2 project using CLI and Webpack). I'm hosting my app at https://example.org/MyApp. Unfortunately, when I try to run the site, I receive a 404 error for each file I have referenced. The browser is trying to look for my files at https://example.org/file.jpg when they are actually hosted at https://example.org/MyApp/file.jpg. Is there any way to tell IIS to search for these files in the subdirectory instead of the root folder?

As a note, Webpack uses relative file paths for all bundling, so changing these file paths to be absolute is not feasible.

Answer 1

Edit your index.html to set the <base href>

For example <base href="/MyApp/">

Answer 2

Maybe i'm beating a dead horse here, however this seems to work pretty solid:

Basically a mixup of setting base-href and IIS-url-rewrite.

1. build ng-app with --base-href /myAppDir/
2. Ensure URL-Rewrite module is available for your IIS-Website
3. add a web.config-file to the website's root folder.
4. edit file from 3. to be like, for example:

<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="/MyApp/" />
            <!--<action type="Rewrite" url="/" />-->
          </rule>
        </rules>
      </rewrite>
    </system.webServer>
    </configuration>

5. You most likely want to use another regular expression as match-url to match your website's needs.

Taken from: https://devblogs.microsoft.com/premier-developer/tips-for-running-an-angular-app-in-iis/