Under the hood of the Angular Compatability Compiler(ngcc)

Click for: original source

In this artice, we will explore how angular makes non Ivy libraries compatible with Ivy libraries using its compatability compiler ngcc. By Ajit Singh.

Angular compiles the code in the latest version(v9) but, not all code is compiled at the same time. There are libraries, npm modules, dependencies are precompiled and these may not work well with the way ngtsc compiles Angular code. This may cause failures at runtime, compile-time, etc. Fortunately, the Angular has already solved these problems for us using the Angular compatibility compiler ngcc.

One of the first problems that we face while transpiling non-Ivy code into Ivy compiled code is that we now have no decorator info in our files. To solve it ngcc uses the .metadata.json files in the Angular Package Format. These files contain information that was present in the Typescript source but was removed during transpilation to Javascript, and this information is sufficient to generate a patched JavaScript files which add the Ivy static properties to decorated classes.

The article is split into these detailed sections:

  • What is ngcc?
  • How ngcc works?
    • Metadata files from Angular Package Format
    • Overall ngcc architecture

Follow the link to original article to get the full overview. Well done!

[Read More]

Tags frontend web-development angular nodejs javascript