Angular 4 Deployment


Angular 4 Build

In this tutorial i will be showing you the Angular 4 deployment basics.

Build Angular 4 Project

Run the command below from the project folder you want to compile.

ng build

You will now notice a new folder added to your project named 'dist', the loose files you have in this folder not meant to be for production.

To build Angular 4 project for production use '--prod' parameter like the command below:

ng build --prod

For production compilation the Angular 4 output files' sizes will be now smaller.

How Angular 4 production files are smaller ?

When we compile an Angular 4 file the engine will generate a JavaScript files out of it, before Angular 4 the output files were very big which can affect the page load speed, the only way i used with Angular 1 'AngularJS' is minification which is simply tools that remove the spaces, with the new Angular 4 engine the deployment became very impressive, i have seen my files going to 40% from the original size.

What is AOT compilation ?

AOT stands for Ahead-Of-Time compilation. Ok but what is it ? it's part of the engine which pre-build the components and the templates, AOT enhanced the overall performance by having the template and component code in the same file and figure out all the unused directives and ignore them, isn't that sweet!



Subscribe to
for video tutorials updates