AngularCli build and server --aot vs --prod

user_491436 0
Viewed 37506

I'm converting an Angular2 app using commonjs for JiT and the old way of manually configuring aot (two index.html files, two main.ts files, etc) to the angular4 cli template (ng new appName).

It seems much has changed around the cli between 2/4. Watched some youtube videos, created a new app with the ng cli, and I'm seeing that both ng build and ng serve support --prod and --aot flags but the generated webpacks are different in size when using the two different flags.

What is the difference between 

ng build --prod

and 

ng build --aot

and then for serve:

ng serve --prod

and

ng serve --aot

it seems that prod bundles are smaller than aot bundles, but why?

angular-cli angular
4 Answers

ng build –prod OR ng build

Using the --prod flag allows Angular to do Ahead of Time Compilation (AOT).

AOT Ahead of Time Compilation

The Angular Ahead-of-Time (AOT) compiler converts your Angular HTML and TypeScript code into efficient JavaScript code during the build phase before the browser downloads and runs that code.

Advantages of AOT:

1- Highlights the compilation error, runtime error and exception before running on the browser hence the name Ahead Of Time (AOT).

2- If you use ng build in your projects to build your application if you notice the file size of vendor.bundle.js and vendor.bundle.js.map files in your build directory it will be in MBS which get downloaded to the Browsers and make our application too loaded.

But on the other hand, if you use the flag ng build –prod you will notice an excessive decrease of this files to 200 KBS means 100 or more times lesser in size.

Therefore I recommend you to use the AOT in the building of Angular Application by using --prod flag.

And if you want further reading and information on this topic please refer to the following site: https://angular.io/guide/aot-compiler

user_69235070
Related