What is ‘‘ngcc ’’ in Angular?

Introduction

Angular is a popular front-end framework that provides a powerful platform for building complex web applications. One of the challenges of using Angular is ensuring that all packages and dependencies used in a project are compatible with the version of Angular being used. The Angular team provides a tool called `ngcc` to help address this issue.

What is exactly`ngcc`?

The `ngcc` is short for “Angular Compatibility Compiler”. It is a tool that is used to compile packages that were built with an older version of Angular to work with the latest version of Angular.

When a package is compiled with `ngcc`, the tool inspects the package’s code and generates new code that is compatible with the latest version of Angular. The generated code is stored in a separate directory in the package and is used instead of the original code when the package is used with the latest version of Angular.

The `ngcc` tool is included with the Angular CLI, and is run automatically when you build or serve an Angular project with the `ng build` or `ng serve` commands. It is also run automatically when packages are installed or updated with the `npm` package manager.

How does `ngcc` work precisely?

When you run `ng build` or `ng serve`, the Angular compiler first looks for the `__ngcc_entry_points__.json` file in your project’s `node_modules` directory. This file contains metadata about packages that have been compiled with `ngcc`.

If the file exists, the compiler uses the metadata to load the compiled code for any packages that have been compiled with `ngcc`. If the file does not exist, the compiler falls back to loading the original code for the packages.

When `ngcc` compiles a package, it generates new code that is compatible with the latest version of Angular. The generated code is stored in the `node_modules` directory in the package’s `__ivy_ngcc__` directory.

The `__ivy_ngcc__` directory contains two subdirectories: `esm2015` and `esm5`. These directories contain the compiled code for the package in ES2015 and ES5 formats, respectively. The `typings` directory contains the typings files for the package.

When a package is installed or updated with `npm`, `ngcc` automatically compiles the package if it has not been compiled already. If the package has already been compiled, `ngcc` checks to see if the version of the package has changed. If the version has changed, `ngcc` recompiles the package.

What is `__ngcc_entry_points__.json`?

`__ngcc_entry_points__.json` is a metadata file that is generated by `ngcc`. This file contains information about the Angular packages that have been compiled by `ngcc`.

Each entry point in the `__ngcc_entry_points__.json` file represents a package that has been compiled by `ngcc`. Each entry point contains the following information:

- `name`: The name of the package.

- `esm2015`: The path to the compiled ES2015 version of the package.

- `esm5`: The path to the compiled ES5 version of the package.

- `typings`: The path to the typings file for the package.

- `compiledByAngular`: A boolean value indicating whether the package was compiled by `ngcc`.

When the Angular compiler encounters a package that has been compiled by `ngcc`, it uses the information in the `__ngcc_entry_points__.json` file to load the compiled code instead of the original code. This ensures that packages used in an Angular project are compatible with the version of Angular being used.

{
  "ngccVersion": "14.2.12",
  "configFileHash": "6883213aec2e6448f60915fdasfdf864b10646a78045af10f17ba40f81f18dd7c1b8e7",
  "lockFileHash": "5caa59305hgbb31ac6e5c72874fa5d66jhgjhg980fd31bd0675f124685f65297108c48f9",
  "entryPointPaths": [
    [
      "@angular/animations",
      "@angular/animations"
    ],
    [
      "@angular/animations",
      "@angular/animations/browser"
    ],
    [
      "@angular/animations",
      "@angular/animations/browser/testing"
    ],
    [
      "@angular/cdk",
      "@angular/cdk"
    ],
    [
      "@angular/cdk",
      "@angular/cdk/a11y"
    ],
    [
      "webpack",
      "webpack"
    ],
    [
      "zone.js",
      "zone.js"
    ]
  ]

Why is ngcc important?

The Angular framework is constantly evolving, with new features and optimizations being added with each release. However, this means that packages built with older versions of Angular may not be compatible with the latest version. This can cause errors and unexpected behavior when using packages in an Angular project.

ngcc helps to address this issue by providing a way to automatically compile packages to work with the latest version of Angular. This can save developers a lot of time and effort, as they no longer have to manually update packages or search for compatible versions.

Additionally, ngcc allows packages to be updated independently of the Angular version being used in a project. This means that packages can be updated more frequently, providing access to the latest features and bug fixes.

Conclusion

In conclusion, `ngcc` and `__ngcc_entry_points__.json` are important tools in the Angular ecosystem. `ngcc` ensures that packages built with an older version of Angular can be used with the latest version of Angular, while `__ngcc_entry_points__.json` provides metadata that is used by the Angular compiler to load the compiled code for these packages. By using these tools, Angular developers can ensure that their projects are always using the latest and most compatible versions of the packages and dependencies they need.