How and what to deploy Angular2 to IIS

Question

Take for instance angular2-quickstart. What files need to be deployed and what settings need to be set to launch this web app from IIS?

This is a Typescript tutoria

Answer 1

1. Download and install IIS rewrite plugin https://www.iis.net/downloads/microsoft/url-rewrite

2. Create application under default website.

   • Create a folder in c:\inetpub\wwwroot to host the application
   • After step 8 copy dist folder contents to c:\inetpu\wwwroot\

3. Before build in index.html change base href="/" to base href="//"

   • To skip steps 1,2 and 3 for every new build check out step 9 as alternative to step 8

4. Web config structure.

   • Note: Create a Web.config in src folder and add a reference to it in angular-cli.json in assets section so that it gets copied over during each build. -
   • Otherwise you will have manually create this file every time ng build is used.

5. not applicable

6. In angular-cli.json put web.config in assets block

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

7. In angular-cli.josn put custom css path example so that it will be packaged in styles..bundle.cs

       "styles": [
           "../node_modules/font-awesome/css/font-awesome.min.css",
           "../node_modules/bootstrap/dist/css/bootstrap.min.css",
           "assets/site.css",
           "assets/page.css",
           "assets/menu.css",
           "styles.css",
           "../node_modules/primeng/resources/primeng.min.css",
           "../node_modules/primeng/resources/themes/omega/theme.css"        
       ],
   

   If you have custom scripts put those path under scripts section example

       "scripts": [
               "../node_modules/jquery/dist/jquery.js",        
               "index.js" 
               ],
   

8. ng build --prod

   • Note: ng build --prod starts AOT (ahead of time compilation) by default in latest version of angular-cli
   • Note: ng build command deletes dist folder and recreates that folder every time you ng build command

9. Alternative build command:

   ng build --prod --output-path 'C:\inetpub\wwwroot\' --base-href /'/
   

   • a- if you don't want to manually update base-href in index.html

   • b- if you don't want to copy dist folder and wwwroot folder of app.

   • Note1: Following command will only work if you open visual code (or any terminal app) with administrative privileges. Otherwise mkdir command to create output folder in wwwroot will fail.

   • Note2: You still need to update Web.config with . See step 4
   • Note3: Checkout slash / at both starting and end of --base-href /'/

10. Check direct quote from one of the posting. Not sure if changing security privileges of IIS_IUSRS group and IUSR user for ...wwwroot\ as described in one of the web links is required. May be it is not required but I am highlighting it over here for you to keep in mind.

Direct quote from another use : " Ensure the folder of your IIS server has the needed permissions for the IIS_IUSRS group and IUSR user to access it. (Right click on the folder -> Properties -> Security -> Edit -> Add, and type those in. You can click the 'Check Name' button to ensure it's the correct ones you're typing in)"

References : - How and what to deploy Angular2 to IIS - https://www.youtube.com/watch?v=K0XORWxG11k