Deployment of Angular 2 App on IIS

=== 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 

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.