How to deploy angular-cli app on iis

Question

I have simple angular2-cli app (one page with model driven form - no router involved). With "ng serve" all works fine. I made production version with ng build --product. I copied all ./dist folder content into new folder under C:\inetpub\wwwroot. I made virtual app from IIS managment console. Defualt app file is index.html. I browse to app uri and i get only page with "Loading...". I try build without --product switch (only ng build) but result is the same. Angular app is not loading. Is there anything else needed to publish angular app on IIS?

Answer 1

Here is how I solve this situation;

• Create project with angular-cli
• Build your application with ng build
• Open IIS, create new virtual directory and show dist folder
• Set base href in your index.html from / to /yourAliasNameOnIIS

• Use this web.config for redirecting requests to your index.html page

  <system.webServer>
  <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" />
          <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
        </conditions>
        <action type="Rewrite" url="/yourAliasNameOnIIS" />
      </rule>
    </rules>
  </rewrite>
  

• Convert your virtual directory to a web application

You can also use ng build --deploy-url "/yourAliasNameOnIIS" to change src path in dist/index.html.

I hope it helps!