Скачать или смотреть How to Use ngcc with Angular 11/12 in a Monorepo Setup

A comprehensive guide on running `ngcc` with Angular 11/12 in a monorepo environment, overcoming common issues with parallel builds.
---
This video is based on the question https://stackoverflow.com/q/69904686/ asked by the user 'Felipe Centeno' ( https://stackoverflow.com/u/4722843/ ) and on the answer https://stackoverflow.com/a/69904931/ provided by the user 'Vladimir Nesterovsky' ( https://stackoverflow.com/u/831007/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: How to run ngcc with Angular 11/12

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Navigating the Challenges of Running ngcc in Angular 11/12

If you're working in a monorepo environment with multiple Angular projects, you may have encountered some roadblocks while trying to build your applications in parallel. One issue that many developers face is the execution of the Angular compatibility compiler, known as ngcc.

In this guide, we’ll look at how to effectively run ngcc in your Angular projects, specifically when using Angular 11 or 12, and tackle the common issues associated with it.

The Problem: ngcc and Parallel Builds

While automating your build pipeline, you might run into a message stating:

[[See Video to Reveal this Text or Code Snippet]]

This error occurs because ngcc does not support parallel execution. Consequently, when you attempt to build multiple projects at once, it triggers conflicts with the ngcc process which may already be running. Furthermore, if you attempt to execute ngcc directly and encounter the following error:

[[See Video to Reveal this Text or Code Snippet]]

this indicates that the system cannot find the ngcc command in your global tools, possibly due to it being installed in a local project context.

The Solution: Manually Running ngcc

The good news is there is an efficient way to run ngcc manually before you kick off your parallel builds.

Step-by-Step Guide

Use npx to Run ngcc

To avoid the issue of the command not being found, you can leverage npx, which allows you to run local binaries without needing to install them globally. Here’s how you can do this:

[[See Video to Reveal this Text or Code Snippet]]

Replace path with the specific path where your Angular project's Node modules are located. This will ensure that the Angular compatibility compiler processes your libraries correctly.

Running ngcc Before Builds

To effectively manage the build process and avoid errors, you can insert the ngcc command into your build pipeline in a way that it runs prior to your application builds. This can usually be done through scripts in your CI/CD configuration.

Check for Lock Files

If you’re certain that no ngcc process is running and still receive errors, you may need to delete the lock file mentioned in the error message. This file is typically found in your Node modules, at:

[[See Video to Reveal this Text or Code Snippet]]

Removing this file can sometimes resolve lingering issues associated with previous ngcc processes.

Summary

By making a few adjustments in your build process and leveraging npx, you can run ngcc successfully in a monorepo setup while working with Angular 11 or 12. Here’s a quick recap:

Always run ngcc before starting any parallel builds.

Utilize npx to ensure you can access ngcc without global installation.

Monitor and manage lock files to prevent concurrency issues.

Now you can smoothly build your Angular projects without running into ngcc errors, streamlining your development process in the monorepo environment. Happy coding!