Angular 12+：如何在生产构建时规避devDependencies

核心问题拆解 #

你遇到的ngcc缺失问题本质是：Angular构建过程依赖devDependencies里的工具（比如ngcc、Angular CLI本身），但生产构建的最终产物完全不依赖这些开发工具——它们只是构建时的“脚手架”，不会出现在最终的dist/静态文件里。

最优方案：复用构建产物，生产环境零依赖安装 #

这最贴合你“非生产所用，勿入生产环境”的准则：

• Staging阶段完整完成构建与测试：
  1. 执行npm ci安装所有依赖（包括dev）
  2. 执行ng build --configuration production（必须加--configuration production，默认build是开发配置，会保留调试信息、未压缩代码）
  3. 执行npm run test-headless完成测试
  4. 将构建生成的dist/目录作为流水线产物归档（比如用tar打包）
• 生产部署阶段直接部署静态产物：
  1. 在生产节点解压归档的dist/目录
  2. 部署到Nginx、Apache等web服务器即可
• 好处：生产环境完全不需要安装任何npm依赖，彻底规避漏洞风险，同时产物是纯静态的生产就绪状态。

退而求其次：必须在生产节点构建时的处理 #

如果因为动态配置（比如你需要的base-href）必须在生产节点构建，按以下步骤来：

1. 安装完整依赖：npm ci（包含devDependencies，确保ngcc等工具存在）
2. 执行生产构建：ng build --configuration production --base-href "https://${SITE_FQDN}"
3. 构建完成后，可删除整个node_modules目录（可选，进一步贴合你的安全准则）
4. 只保留dist/目录用于部署

• 关键提醒：--configuration production会自动帮你做这些事：代码压缩、tree-shaking移除未使用代码、剥离开发调试绑定、禁用热重载等，确保产物是纯净的生产版本。

关于ngcc的补充说明 #

ngcc只是Angular构建时用来兼容第三方库的编译工具，它只会在构建过程中运行，不会被打包到最终的dist/产物里。所以即使安装了dev依赖进行构建，最终产物里也不会包含任何开发相关的内容。

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