An in-depth overview of Angular compilers


I really liked your overview. It has got just the right level of abstraction. Well done!


Thank you Ajit for sharing the insightful article! Here is my feedback:

You’ve wrote: “Angular has two compilers: ngtsc and ngcc.” --> that was confusing for me. After investing time in search this is what I’ve understood: Angular does not have 2 compilers ngtsc & ngcc. It has 2 compiler entry-points: ngtsc and ngcc. They are kind of parts of @angular/compiler-cli and they don’t have the same functionalities.

The following is from the Angular compiler architecture documentation in Github:

  • ngtsc will be an Typescript-to-Javascript transpiler that reifies Angular decorators into static properties. It is a minimal wrapper around tsc which includes a set of Angular transforms. While Ivy is experimental, ngc operates as ngtsc when the angularCompilerOption enableIvy flag is set to true in the tsconfig.json file for the project.

  • ngcc (which stands for Angular compatibility compiler) is designed to process code coming from NPM and produce the equivalent Ivy version, as if the code was compiled with ngtsc . It will operate given a node_modules directory and a set of packages to compile, and will produce an equivalent directory from which the Ivy equivalents of those modules can be read. ngcc is a separate script entry point to @angular/compiler-cli.

  • ngcc can also be run as part of a code loader (e.g. for Webpack) to transpile packages being read from node_modules on-demand.