AngularCli build and server --aot vs --prod

Question

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?

Answer 1

--prod- apply uglify and minify to reduce the bundle as well make angular work in production mode which reduces runtime warnings given by angular compiler as well increase performance.

--aot- generally when we serve angular project all the angular files are downloaded on browser and it will compile and execute the application on the browser but in aot entire application delivered to the browser is precompiled hence improves the performance

build- will bundle files and put it in dist folder so that we can use those for deployment on servers.

serve- will run the application on lite server.