Heroku部署Angular应用时报错@angular/material/card依赖缺失如何解决

• Heroku默认生产环境构建时，仅会安装package.json中dependencies字段下的依赖，不会安装devDependencies下的包。你本地执行npm i会全量安装所有依赖，因此本地构建正常，Heroku构建时缺失依赖。
• 你使用的@angular/material依赖@angular/cdk的对应子模块，若@angular/cdk被放在devDependencies中，或者两者版本不匹配，就会触发上述缺少依赖的报错。
• 本地Node.js、npm版本与Heroku默认运行环境版本不一致，也可能导致依赖安装逻辑差异触发报错。

1. 调整依赖位置与版本
   打开你的package.json文件，确认@angular/cdk存在于dependencies字段下：

• 如果@angular/cdk在devDependencies中，直接移动到dependencies下即可
• 如果未安装@angular/cdk，执行命令npm install @angular/cdk --save，确保安装的版本与你当前使用的@angular/material版本完全一致
  执行npm install更新package-lock.json锁文件。

2. 对齐Node与npm版本
   在package.json中新增engines字段，指定与本地一致的运行环境版本（本地执行node -v、npm -v可查看对应版本号）：

"engines": {
  "node": "你的本地Node版本号，例如16.18.1",
  "npm": "你的本地npm版本号，例如8.19.2"
}

3. 清理构建缓存并重新部署

• 如果你安装了Heroku CLI，执行命令heroku builds:cache:purge -a 你的Heroku应用名称清理历史构建缓存，避免旧缓存干扰
• 将修改后的package.json、package-lock.json提交到代码仓库，重新推送到Heroku触发构建即可。

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