Angular应用部署至Heroku报错：Uncaught TypeError: t.resolve is not a function

我之前帮好几个开发者排查过类似的Heroku部署Angular时的Promise相关报错，咱们一步步来定位解决：

1. 先排查core-js版本兼容性 #

这个错误核心指向了es6.promise.js的polyfill问题，很大概率是core-js版本和你的Angular CLI版本不匹配导致的：

• 打开你的package.json，查看core-js的版本号。Angular 10及以上版本建议使用core-js@3.x系列，旧版本Angular可能对应core-js@2.x；
• 执行对应命令更新版本：

  # 针对Angular 10+
  npm install core-js@latest --save
  # 针对旧版Angular
  npm install core-js@2.6.12 --save
  

2. 调整polyfills.ts的配置 #

打开src/polyfills.ts文件，确保Promise的polyfill导入正确且顺序合理：

• 如果你用的是core-js@3.x，导入语句应该是：

  import 'core-js/es/promise';
  

• 如果你用的是core-js@2.x，导入语句改为：

  import 'core-js/es6/promise';
  

• 注意：把core-js的polyfill导入放在所有第三方库的polyfill之前，避免冲突。

3. 确认Heroku的构建与启动配置 #

• 检查package.json里的scripts命令是否正确：

  "scripts": {
    "build": "ng build --prod",
    "start": "node server.js" // 如果你用Express作为静态文件服务器的话
  }
  

• 确保@angular/cli已经安装在devDependencies里，如果没有，执行：

  npm install @angular/cli --save-dev
  

Heroku需要它来完成Angular的生产构建。

4. 清理缓存重新构建部署 #

• 本地先彻底清理依赖和缓存：

  npm cache clean --force
  rm -rf node_modules package-lock.json
  npm install
  ng build --prod
  

  先在本地测试生产构建后的代码是否能正常运行，没问题再推送到Heroku；
• 推送前可以清理Heroku的远程缓存：

  heroku repo:purge_cache -a 你的应用名称
  

5. 排查第三方库dz.js的冲突 #

错误栈里多次提到dz.js，这个库可能自带了Promise的polyfill，和core-js的polyfill产生了冲突：

• 尝试更新dz.js到最新版本；
• 查看该库的文档，是否有禁用自带polyfill的配置项；
• 如果是通过脚本标签引入的dz.js，把它的引入放在core-js polyfill加载完成之后。

按照上面的步骤逐一排查，应该能解决这个Promise相关的报错。

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