In my previous blog, I wrote about CRUD operation in Angular with .Net Web API. In this blog, I will write about building and then hosting an Angular application on IIS.
In the development phase, we use ng serve command to run our Angular application with localhost URL.
But, do we have to do the same process for a production environment? The answer is absolute no.
Build an Angular App for Production with ng build command
Angular CLI provides various command to perform their specific tasks. To create a project package for production use below command –
ng build –prod
This command will take a few minutes and create a folder with name dist and keep all related files in this folder.
Run – ng build –prod command
Read:- Angular Interview Questions
That’s all you have to do to set your Angular project for the production environment.
Note: Once you open index.html file, you can find all .js and .css file name which are parallel to index.html file
You can do more with ng build command.
Suppose you want to change your base href. For example you don’t want to run your Angular application from the root, instead, you want to run with a virtual directory, then run below command –
ng build –prod –base-href /angulardemo
Once your command completed successfully, you may check index.html in the dist folder. You may see base href value is set as per your command. So to host your Angular application on IIS, you have to create a virtual directory with name angulardemo.
Options available with ng build command
There is numerous option available with ng build command. But below are the main and useful option that can be used.
Command Name | Description | Example |
–base-href= baseurl | It sets the base URL of the Angular application | ng build –/angulardemo |
–extractCss = true | false | The default value is false. If it is true the css extracted in a stylesheet file instead of js file. | ng build –extractCss |
–prod = true | false | When it is set to true, it sets the build configuration for production target. | ng build –prod |
–watch= true|false | It starts building the project as soon as there is a change in a file. The default value for this option is false. | ng build –watch |
–aot = true | false | Build using ahead of Time compilation | ng build –prod –aot |
How to host Angular application on IIS?
Once the application is ready for deployment, we will see how to host it on IIS. Basically, if you would have done hosting the website on IIS in past then it is very easy for you. There are no differences in hosting an Angular application or normal HTML website.
Follow the below steps to host your Angular application on IIS
1. Open IIS by running inetmgr command.
2. Expand up to Sites node.
3. Right-click on Sites node. Click on Add Website
4. Give a name to your site
5. Provide a physical path.
6. Assign a port which is accessible to you.
7. Click on OK
That’s all, you have to do it for hosting an Angular application on IIS.
Select your site from the left side panel, and click on browse from the right-side panel.
And yes, if you have done it in the right way, your application will work like a charm.
Hope you like this blog.
Please share this blog on social media and give your feedback in the comment box below.
You may like other blogs –
Interview Questions and Answers Series –
MVC Interview Questions and Answers
Web API interview questions and answers
Prev – Angular CRUD Example with ASP.Net Web API
