Angular项目构建运行报错‘NGCC failed’，求解决方案

Hey there, sorry to hear you hit this NGCC failure after adding Popper to your Angular app—this is a common issue tied to dependency compatibility or cached build artifacts, and we can work through it step by step. Here are the most reliable fixes to try:

1. Clear the NGCC Cache #

NGCC (Angular Compatibility Compiler) caches processed dependencies, and new packages like Popper can sometimes mess with that cache. Clear it out with this command:

ngcc --clear-cache

After running that, try rebuilding your app with ng serve or ng build—this often resolves the immediate failure.

2. Verify Popper Version Compatibility #

Popper has two major versions that aren’t interchangeable with different Angular releases:

• Popper v1: Published as popper.js (compatible with Angular versions pre-12)
• Popper v2: Published as @popperjs/core (required for Angular 12 and above)

If you installed the wrong version, swap it out with the compatible package:

# Uninstall the incorrect version
npm uninstall popper.js  # or npm uninstall @popperjs/core if that's what you have
# Install the right version for your Angular
npm install @popperjs/core  # for Angular 12+
# OR
npm install popper.js@^1.16.1  # for older Angular versions

3. Force NGCC to Re-Process All Dependencies #

Sometimes NGCC doesn’t properly generate Ivy-compatible entry points for new packages. Run this command to trigger a full re-processing:

ngcc --properties es2015 browser module main --first-only --create-ivy-entry-points

Once this completes, try building your app again.

4. Clean and Reinstall All Dependencies #

Corrupted node_modules or lock files can cause unexpected NGCC issues. Follow these steps to start fresh:

• Delete the node_modules folder from your project root
• Delete package-lock.json (or yarn.lock if you use Yarn)
• Run npm install to reinstall all dependencies
• Attempt to build your app with ng serve

5. Check Ivy Configuration #

Ensure your Angular app is using Ivy correctly (Angular 9+ enables Ivy by default):
Open your angular.json file, navigate to projects -> [your-project-name] -> architect -> build -> options, and confirm enableIvy is set to true. If it was false, switching it to true might resolve compatibility with Popper v2.

If none of these fixes work, run ng serve --verbose to get more detailed error logs from NGCC—this will help pinpoint exactly which part of the processing failed.

内容的提问来源于stack exchange，提问作者Alex Spencer