Angular CLI 1.7.2+Webpack4.1.0执行ng build --prod构建失败求助

Hey there! Let’s work through this production build issue you’re hitting. It’s super common to run into discrepancies between dev and prod builds after dependency upgrades, especially when mixing Angular CLI versions with newer Webpack releases.

Key Background First #

First off, a critical note: Angular CLI 1.7.2 is designed to work with Webpack 3.x (specifically Webpack 3.11.0 as its default dependency). Manually upgrading to Webpack 4.1.0 introduces compatibility gaps because Webpack 4 made breaking changes to configuration syntax, plugin requirements, and dependency handling that the 1.7.x CLI doesn’t support out of the box. That’s almost certainly a root cause here.

Step-by-Step Troubleshooting #

Let’s break down the checks and fixes you can run, starting with the easiest wins:

1. Verify Dependency Version Compatibility #

First, check your package.json for conflicting versions:

• Ensure @angular/cli is explicitly set to 1.7.2 (no caret ^ that might pull in unintended updates)
• Check that webpack isn’t set to 4.1.0—revert it to the CLI’s supported version with:

  npm install webpack@3.11.0 --save-dev
  

• If you insist on keeping Webpack 4, you’ll need to install webpack-cli (a required peer dependency for Webpack 4 that isn’t included in CLI 1.7.x):

  npm install webpack-cli@^3.3.12 --save-dev
  

  Note: Even with this, you’ll likely hit other config conflicts since CLI 1.7.x doesn’t understand Webpack 4’s syntax.

2. Inspect Your Webpack Configuration (If Ejected) #

If you ran ng eject to get a custom webpack.config.js, Webpack 4 requires several breaking changes:

• Replace module.loaders with module.rules
• Add a mode property to your config (set to 'production' for prod builds)
• Replace CommonsChunkPlugin with SplitChunksPlugin (Webpack 4’s built-in alternative)
• Update any loaders/plugins that don’t support Webpack 4 (e.g., older html-webpack-plugin versions)

3. Get Exact Error Details #

Run the prod build with verbose logging to capture specific error messages—this will make troubleshooting far easier:

ng build --prod --verbose

Common errors here include:

• Missing peer dependencies for Webpack 4
• TypeScript version mismatches (Angular 5 requires TypeScript 2.4.x–2.6.x; avoid 2.7+)
• Invalid Angular compiler options in tsconfig.json for prod mode

Next Steps #

Since you mentioned you can share your webpack.config.js and package.json files, those will help us pinpoint the exact issues. For example, we can spot:

• Mismatched dependency versions
• Outdated Webpack config syntax
• Conflicting plugins or loaders

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