Running Angular on an IIS web server

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):

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

  <!-- 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) -->
    <caching enabled="true">
        <add extension=".svg" policy="CacheUntilChange"/>
        <add extension=".ico" policy="CacheUntilChange"/>
        <add extension=".js" policy="CacheUntilChange"/>
        <add extension=".css" policy="CacheUntilChange"/>
      <clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="5.00:00:00" />

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



Leave a Reply

Your email address will not be published. Required fields are marked *