CODEWITHSUNDEEP
angulartypescript
pearldiver
pearldiver

Reputation: 517

What's the relationship and difference between ng build and ngc

I know the question is confusing, because it confused me for some time. Previously I think ngc is just another tsc, it compile ts to js. And ng build is a all-in-one command to do both ngc work and bundle and deploy compiled js scripts (like webpack). But now i'm confused because i saw the sample project of ng new has below script

"build:prod": "ng build --prod && ngc"

this scripts have both which confused me, i really want to know that exactly the ng build do and ngc do, and why we need both.

I'm a new to anggular 4 and front end development, many thanks to you who comments on this thread.

Upvotes: 2

Views: 3869

Answers (3)

Sachin Mishra
Sachin Mishra

Reputation: 1183

Angular is making use of two type of compilers those are JIT and AOT. when you run the default command for running and building your app with command ng serve and ng build it makes use of JIT(Just in Time) compiler.

On the other hand when you make use of ngc command it makes use of (AOT) Ahead of Time compiler which actually compiler and build code before actually gets loaded in browser.

Upvotes: 0

jellybeans
jellybeans

Reputation: 493

ngc is a command available to you when you install the angular compiler. it's purpose is to compile your angular code, including your templates and css, into TypeScript. Compiling this way allows you to then run something like Rollup to create a bundle after "tree shaking" which is the process of getting rid of dead code and thus producing a smaller file.

ng build is available to you by angular cli and does something a bit different. It will create bundles for you and create a distribution folder for you that includes all the files necessary for deployment to a web server. It even modifies your index.html by adding scripts to load the bundles created by the builds.

These two articles where helpful to me in understanding the purpose of ngc.

http://blog.mgechev.com/2016/06/26/tree-shaking-angular2-production-build-rollup-javascript/

http://www.gistia.com/angular-performance-two-strategies/

Upvotes: 1

MichaelSolati
MichaelSolati

Reputation: 2872

Ignore the sample project, your original understanding of ngc as being a tsc replacement for Angular applications is correct.

Also if you are using the ng build --prod command you will by default use AOT compilation, which is why one would use the ngc tool.

Upvotes: 2

Related Questions