Explanation on Angular CLI 1.2.4 command ng build

Question

I am learning Angular4 and wondering about what is ng build and ng build --prod really do for us.

When running with ng build, there are, for instance main.bundle.js, main.bundle.js.map , generated inside dist folder

but with ng build --prod, there are only, for instance main.90e798078cb11a3159ce.bundle.js , generated inside dist folder

Can anyone please explain how ng build work with and without --prod

Thank you

Answer 1

According to the angular-cli documentation:

Both --dev/--target=development and --prod/--target=production are 'meta' flags, that set other flags. If you do not specify either you will get the --dev defaults.

and the difference between them are explained in this link: https://github.com/angular/angular-cli/wiki/build#--dev-vs---prod-builds

  Flag                 --dev    --prod
--aot                   false     true
--environment            dev      prod
--output-hashing        media      all
--sourcemaps             true     false
--extract-css           false     true

Answer 2

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