Deploy Angular App to IIS

Steps

1. Before deploying angular app to IIS, don’t forget to download IIS URL Rewrite module. This will solve Angular app’s route problems.

2. When you deploy angular app to IIS server, type the command below in cmd console

ng build –base-href “/AngularTest/” –prod(you can use any other name other than AngularTest). If the command executes successfully, there will be a folder named dist created in your Angular project. The folder includes all the files you need to deploy to IIS.

3. Create a new folder, copies the files generated in dist folder and moves these to the new folder. This new folder will be your new IIS application’s source path. However, you can just make the dist folder to be the new application’s source path. The reason for creating a new folder is that each time you run the deploy command, you may renew the web.config file’s content in dist folder. Whereas, if you make the new folder to be your IIS application’s source path, you can avoid the problem.

4. Create a new application in your local IIS. Keep in mind that your IIS application’s name need to be the same to the cli base href. For example in this article, I named AngularTest to be the name for base href, then the IIS application’s name shall be the same too. Then choose the path that you want to be the source path of the application. It can be dist folder or other location path as well.

5. Add URL rewrite role below in your web.config

The diagram shown below is the figure you shall be able to see after successfully deployed.