Angular 16 removes NGCC — and your dependencies may have just become a problem

If your project is still running a version below Angular 16, or you suspect you might be working with one sometime down the road, there is something you should pay attention to.

I have put together a dedicated tool that is designed to assist you in getting your dependency tree ready for the upgrade.

Dependencies built for View Engine will not compile under Angular 16 or later.

The Angular Compatibility Compiler (NGCC) is now gone.

When your project relies on a large number of packages, you need a way to identify which ones were built against the old View Engine setup. Knowing this in advance is essential for planning your migration.

Before you move to Angular 16 or newer, those legacy dependencies have to be removed or replaced. Going through every package manually is an incredibly tedious and time-consuming process.

The utility I built will perform an audit on your package.json and flag the dependencies that need to be either dropped entirely or updated if a compatible version is still available.

I welcome pull requests, and if you come across any problems, please open an issue in the GitHub repository.

If the tool turns out to be useful or interesting to you, a ⭐ would be greatly appreciated 🙂

GitHub - danielglejzner/ng16-dep-audit: NGCC has been removed in Angular 16. Quickly check which dependencies stop you from upgrading!
NGCC has been removed in Angular 16. Quickly check which dependencies stop you from upgrading! - danielglejzner/ng16-dep-audit
[Utility] Angular 16 killed NGCC - You can't simply upgrade! — figure 1GitHubdanielglejzner
[Utility] Angular 16 killed NGCC - You can't simply upgrade! — figure 2

Key capabilities

  • Goes through every npm package listed in the project's package.json.
  • Predicts which Angular packages are incompatible with the Angular 16 compiler and require an upgrade, removal, or replacement.
  • Shows packages that either have no Angular-related dependencies or cannot be found in the npm registry.

How to use it

  • Execute the command from the directory that holds your package.json file.

Standard invocation

npx ng16-dep-audit

CLI flags and parameters

  • --style=<style>: Chooses the presentation format. The options are line (which is the default), table, and markdown.
  • --output=<file>: Sets the destination file for the results. When omitted, the output goes straight to the terminal.
  • --skip-ng (-ng): Excludes every Angular framework-internal package from the audit.
  • --package-boundary (-pb): Makes sure that @angular/core is declared in the library's own package.json.

Typical use cases

  • Run the audit and show the findings in a table layout:

    npx ng16-dep-audit --style=table

  • Run the audit and write the findings in markdown format to a file:

    npx ng16-dep-audit --output=dependency-report.md --style=markdown

For a full rundown of the command and all available options, run npx ng16-dep-audit --help.

A big thank you goes out to Jordan Hall — he pushed the detection accuracy for View Engine dependencies up to 99.9%. He also came up with the custom output options.