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

Answer 1

For me, it was very simple:

1. Run the ng build command. It will generate the dist folder.
2. Make href="" in the index.html file.
3. Give the dist folder path to IIS application and it will work.

This makes it even simpler, you do not need to modify the index.html file:

ng build -prod --base-href

Answer 2

I tried the below approach it worked.

1. Create new website in IIS (through inetmgr)
2. use "ng build --prod" - generating production version code
3. Copy the dist folder's files then paste it to root folder of IIS website (Don't copy the folder and put that into root folder of IIS Website which will cause an issue)
4. Set the credentials, authorization and etc... from your end.
5. Set the root folder's access permission for "MACHINE_NAME\IIS_IUSRS & MACHINE_NAME\NETWORK SERVICE"
6. Set the default page as "index.html" in IIS
7. Now you can browse the website.

Answer 3

I referred many suggestion, what worked for me was this link

A good explanation why things need to be configured in a different way for an Angular app are clearly described here. Followed the steps in the link and then I added a web.config within the published files folder location with the below settings:

<?xml version="1.0"?>
<configuration>
<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="/" />
        </rule>
      </rules>
  </rewrite>
 </system.webServer>
</configuration>

The settings are also described in the link above. Hope this help someone.

Answer 4

add web.config file to location app/src/ content of web.config:

<?xml version="1.0" encoding="utf-8"?>
<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="./index.html" />
      </rule>
    </rules>
  </rewrite>
</system.webServer>
</configuration>

---

in .angular-cli.json add web.config to assets section as follows:

"assets": [
    "assets",
    "favicon.ico",
    "web.config"
],