Angular项目部署Google Cloud时css-loader报回调已调用错误如何解决

这个callback(): The callback was already called.错误触发在css-loader执行逻辑中，仅在部署环境出现、本地运行正常的核心原因有3个：

1. 部署环境使用了Node.js v17.1.0，这是官方已停止维护的非LTS奇数版本，本身存在大量兼容性问题，和Angular构建工具链中的css-loader适配存在已知bug，本地使用的是更低的LTS版本Node所以不会触发问题
2. prod构建默认开启CSS压缩、样式校验逻辑，触发了css-loader的异常流程，导致回调函数被重复调用，本地开发环境不会开启全量prod校验所以正常
3. 部署环境安装依赖时版本浮动，和本地使用的css-loader、@angular-devkit/build-angular版本不一致，引入了存在bug的依赖版本

• 优先替换部署环境的Node.js版本为LTS稳定版，推荐使用Node 16.x或18.x版本。如果使用Docker构建，直接修改Dockerfile中的基础镜像标签为node:16-alpine或node:18-alpine即可，90%以上的同类型问题都可以通过这个方案解决
• 锁定css-loader的兼容版本，如果替换Node版本后仍存在问题，在package.json中添加版本覆盖配置：
  如果你使用npm 8+，添加overrides字段：

  {
    "overrides": {
      "@angular-devkit/build-angular/css-loader": "6.7.3"
    }
  }
  

  如果你使用yarn，添加resolutions字段：

  {
    "resolutions": {
      "@angular-devkit/build-angular/css-loader": "6.7.3"
    }
  }
  

  配置完成后重新安装依赖再执行构建即可
• 排查不规范样式代码，可以先临时关闭生产构建的CSS优化验证问题是否出在样式环节，修改angular.json中生产环境配置的optimization参数：

  "production": {
    "optimization": {
      "styles": false
    }
  }
  

  如果关闭后可以正常构建，逐一排查项目中的自定义样式、第三方样式引入是否存在语法错误，比如未闭合的样式规则、错误的嵌套语法、不兼容的CSS新特性等
• 统一依赖版本，将本地生成的package-lock.json或yarn.lock提交到代码仓库，部署时使用npm ci代替npm install安装依赖，保证部署环境的依赖版本和本地完全一致，避免版本浮动引入bug

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