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?

Solution 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!

Solution 2

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)

Solution 3

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

Solution 4

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.

Solution 5

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.

View more solutions