Deployment of Angular 2 App on IIS

Question

Hi,

I am working on Asp.Net Zero. It divided it in to two modules like Web App and Core API.

I need help to deploy the Angular 2 App on the IIS. Anyone has experience with the deployment of Angular 2 app on IIS, then please help me.

Thank you

Ranjeet Patra · Answer

Check out the below links; It may may help you out: https://www.youtube.com/watch?v=K0XORWxG11k https://www.codeproject.com/Articles/1115444/Developing-And-Deploying-An-Angular-Application-Wi http://stackoverflow.com/questions/35459459/how-and-what-to-deploy-angular2-to-iis/35464465 http://stackoverflow.com/questions/41304626/how-to-deploy-angular-cli-app-on-iis

Parminder Pal Singh · Answer

Thank you for your efforts, i already have been go through from all of yours given links. According to Asp.Net Zero steps: 1) Build project using " ng build -prod" command 2) After that it will create dist folder 3) Place Angular 2 project web.config into dist folder 4) Add website in IIS and give physical path of dist folder I followed all the steps but its not working.

ppp sss · Answer

=== List of multiple steps for Angular 2 app deployment on your local IIS ==== Had to figure out additional steps besides info from your video. May be following list will help to speed up process deployment for others in future . 0. Download and install IIS rewrite plugin https://www.iis.net/downloads/microsoft/url-rewrite 1. Create application under default website. Create a folder in c:\inetpub\wwwroot to host the application 2. After step 8 copy dist folder contents to c:\inetpu\wwwroot\ 3. Before build in index.html change to /"> ** To skip steps 1,2 and 3 for every new build check out step 9 as alternative to step 8 4. Web config structure. Create a Web.config in src folder and add a reference to it in angular-cli.json in assets section (step - 6) so that it gets copied over during each build. Otherwise you will have to manually copy this file every time build is published. /" /> 5. -- no longer relevant -- 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-x: ng build --prod starts AOT (ahead of time compilation) by default when you are using latest version of angular-cli Note-y: ng build commands 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 between dist folder and wwwroot folder of app. Note-9.1: 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. Note-9.2: You still need to update Web.config with . See step 4 Note-9.3: Checkout slash / at both starting and end of --base-href / '/ 10. Note: 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 its not required but keep it in mind. ** 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 : - http://www.c-sharpcorner.com/forums/deployment-of-angular-2-app-on-iis - https://coderwall.com/p/mycbiq/deep-linking-angularjs-on-windows-azure-iis - https://www.iis.net/downloads/microsoft/url-rewrite - https://stackoverflow.com/questions/35459459/how-and-what-to-deploy-angular2-to-iis/35464465 - https://www.youtube.com/watch?v=K0XORWxG11k - http://www.c-sharpcorner.com/forums/deployment-of-angular-2-app-on-iis

ankur gupta · Answer

I found a nice, detailed and working explanation of deploying angular 2 app in IIS at this link - http://getgoingit.blogspot.in/2018/02/publishing-and-deploying-angular-4.html.