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

You can deploy it without any Web.config file as below,

---

You can find index.html in dist folder inside it find base href tag

now change its path as accordingly

Ex -: if deploying inside wwwroot

<base href="/">

Ex-: if deploying inside a folder in wwwroot

<base href="/FolderName/">

Answer 2

In addition to ulubeyn's answer that mostly worked for me, I added my own IIS re-write rules to enable:

1) the initial redirection from /dist to alias 2) Javascript downloads from alias and 3) Angular routing on the alias

<rules>
  <rule name="Redirect from blank URL to IIS Alias" stopProcessing="true">
    <match url="^/?$" />
    <action type="Rewrite" url="/MyDist" />
  </rule>
  <rule name="Redirect from /dist folder to IIS Alias" stopProcessing="true">
    <match url="^(.*)/dist" />
    <action type="Rewrite" url="/yourAliasNameOnIIS" />
  </rule>
  <rule name="Allow Angular URL Routing on IIS Alias" stopProcessing="true">
    <match url="^yourAliasNameOnIIS/*" />
    <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>
  <rule name="Redirect to IIS Alias folder with parameters" 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/{R:1}" appendQueryString="true" />
  </rule>
</rules>

Answer 3

for those who use angular i18n, you have to build the app for each language and put them in separate folders

ng build --output-path=dist/fr --prod --bh /fr/
ng build --output-path=dist/en --prod --bh /en/

and here is the config for iis

<?xml version="1.0" encoding="UTF-8"?>
 <configuration>
  <system.webServer>
    <directoryBrowse enabled="true" />
    <rewrite>
        <rules>
            <rule name="Imported Rule 1" stopProcessing="true">
                <match url="^../index\.html$" ignoreCase="false" />
                <action type="None" />
            </rule>
            <rule name="Imported Rule 2" stopProcessing="true">
                <match url="(..)" ignoreCase="false" />
                <conditions logicalGrouping="MatchAll">
                    <add input="{REQUEST_FILENAME}" matchType="IsFile" ignoreCase="false" negate="true" />
                    <add input="{REQUEST_FILENAME}" matchType="IsDirectory" ignoreCase="false" negate="true" />
                </conditions>
                <action type="Rewrite" url="{R:1}/index.html" />
            </rule>
            <rule name="Imported Rule 3">
                <match url="^$" ignoreCase="false" />
                <conditions logicalGrouping="MatchAll">
                    <add input="{HTTP_ACCEPT_LANGUAGE}" pattern="^fr" />
                </conditions>
                <action type="Redirect" url="/fr/" redirectType="Found" />
            </rule>
            <rule name="Imported Rule 5">
                <match url="^$" ignoreCase="false" />
                <conditions logicalGrouping="MatchAll">
                    <add input="{HTTP_ACCEPT_LANGUAGE}" pattern="^es" negate="true" />
                </conditions>
                <action type="Redirect" url="/en/" redirectType="Found" />
            </rule>
        </rules>
    </rewrite>
 </system.webServer>
 </configuration>

Answer 4

When you open the dev tools of your browser, you would have seen 404 messages when the app was trying to donwload the js, css etc files

You need to set the base href in index.html to

<base href="./">

this will make sure the base ref is relative to where your website lives in IIS. You also need to use hash location strategy otherwise, IIS will intercept your ng2 router URL changes and try to find a controller/action for the URL.

under the imports of your app.module.ts:

RouterModule.forRoot(routerConfig, { useHash: true })

I have done these 2 steps and all is working perfectly on Azure VM with IIS. Doing it this way also means it you do not have to put your SPA on the root and you can have multiple SPA's running happily next to each other (in different websites on IIS)

Answer 5

On IIS, you have to copy a web.config to the deployed folder:

<?xml version="1.0" encoding="utf-8"?>
<configuration>

<system.webServer>
  <security>
    <requestFiltering>
      <fileExtensions>
        <add fileExtension=".json" allowed="true" />
        <add fileExtension=".woff2" allowed="true" />
      </fileExtensions>
    </requestFiltering>
  </security>
  <staticContent>
    <remove fileExtension=".woff2" />
    <mimeMap fileExtension=".woff2" mimeType="application/json" />
    <remove fileExtension=".json" />
    <mimeMap fileExtension=".json" mimeType="application/json" />
  </staticContent>
  <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>

You can automatized like this creating the web.config file inside src and then adding this on .angular-cli.json:

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

Answer 6

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!