Build Angular Application for Deployment

In this post we are going to learn how to build your Angular Application for Deploying to the Production Server. I assume here you have basic understanding of your angular project and its architecture, and now you want to deploy your angular application to the server for the web.

An Angular application consists mainly of components and their HTML templates. Because the components and templates provided by Angular cannot be understood by the browser directly, Angular applications require a compilation process before they can run in a browser. So for deploying your project we need to compile all your modules and components to a readable format for the browser and browser only understands HTML, CSS and JAVASCRIPT. So for this we are going to make use of the Angular CLI.

As we all know angular has a CLI so we are going to user Angular's cli command for building our application

//normal build 
ng build 

//aot build
ng build --prod

When we use this command angular compiles an our app into an output directory named dist/ at in our project root.

The application builder uses the webpack build tool, with default configuration options specified in the workspace configuration file angular.json with "production" configuration which is created by default when you use the CLI to create the project.

Using --prod flag in building your application Angular make use of bundling, limited tree-shaking, and also limited dead code elimination. It also gives you errors when ahead of time and many more benefits such as Faster rendering, Better security, Smaller Angular framework download size etc.

After the build process is complete you will get a complete package into the dist/d folder in your project root directory. You just have to copy all the files inside this folder and paste on your server's directory, you will have to paste the build files in public_html folder.

You can also checkout this article to edit your .htaccess file for setting up server configurations.

Happy Coding!