Andreas Plahn Blog

Step 1.
Build your angular application for “production”:
ng build –dist -> output entire site to root/dist folder copy that folder to your IIS website folder.

Step 2.
IIS uses a file called web.config to setup some configuration for a website.
Make sure you have something similar as below in a web.config file in the site root folder (a typical Angular config scenario):

<configuration>
  <system.webServer>
    <!-- These rewrite rules requires the IIS Rewrite module -->
    <rewrite>
      <rules>
        <!-- Support for Angular internal url routing system (routing module) -->
        <rule name="Angular routing" 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="/" />
        </rule>
        <!-- Adds https scheme if missing for all URLs -->
        <rule name="FQDN to SSL" stopProcessing="true">
          <match url="^(.*)$" />
          <conditions>
            <add input="{HTTPS}" pattern="^OFF$" />
          </conditions>
          <action type="Redirect" url="https://{HTTP_HOST}/{R:1}" />
        </rule>
      </rules>
    </rewrite>
    <!-- Mime type fix for woff2 font file type -->
    <staticContent>
      <remove fileExtension=".woff2" />
      <mimeMap fileExtension=".woff2" mimeType="font/woff2" />
    </staticContent>
  </system.webServer>

  <!-- Its okay to cache these static files, index.html will include cache busting paths for Angular js and css files. (when building with --dist param) -->
  <system.webServer>
    <caching enabled="true">
      <profiles>
        <add extension=".svg" policy="CacheUntilChange"/>
        <add extension=".ico" policy="CacheUntilChange"/>
        <add extension=".js" policy="CacheUntilChange"/>
        <add extension=".css" policy="CacheUntilChange"/>
      </profiles>
    </caching>
    <staticContent>
      <clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="5.00:00:00" />
    </staticContent>
  </system.webServer>

  <!-- Make sure index.html is never cached -->
  <location path="index.html">
    <system.webServer>
      <staticContent>
        <clientCache cacheControlMode="DisableCache" cacheControlMaxAge="0.00:00:00" />
      </staticContent>
      <httpProtocol>
        <customHeaders>
          <add name="Cache-Control" value="no-cache, no-store, must-revalidate" />
          <add name="Pragma" value="no-cache" />
          <add name="Expires" value="-1" />
        </customHeaders>
      </httpProtocol>
    </system.webServer>
  </location>

</configuration>