Angular部署Azure静态Web应用失败，如何配置npm版本及依赖？

1. 统一CI环境与本地的Node、npm版本 #

Azure静态Web应用默认的GitHub Actions可能会使用较新的Node/npm版本，和本地环境差异会引发兼容性问题。直接在GitHub Actions配置文件中指定与本地一致的版本：

找到你的部署工作流文件（通常路径为 .github/workflows/azure-static-web-apps-<随机标识符>.yml），添加或修改Node环境配置步骤：

- name: Setup Node.js
  uses: actions/setup-node@v4
  with:
    node-version: '16.18.1' # 与本地Node版本一致
    npm-version: '8.8.0'    # 与本地npm版本一致
    cache: 'npm'            # 启用缓存加速构建

2. 在CI构建中添加--legacy-peer-deps参数 #

本地安装依赖需要该参数，说明项目存在peer依赖版本冲突，CI环境同样需要这个参数才能完成安装与构建：

修改依赖安装步骤 #

将工作流中的npm install命令替换为：

- name: Install dependencies
  run: npm install --legacy-peer-deps

修改构建命令 #

如果Azure默认的构建命令没有包含该参数，同步修改构建步骤：

- name: Build Angular app
  run: npm run build --prod --legacy-peer-deps

或者直接在Azure静态Web应用的门户配置中，将构建命令字段设置为 npm run build --prod --legacy-peer-deps

3. 排查npm ERR! Invalid version报错 #

如果完成上述步骤后仍出现该错误，检查以下内容：

• 项目根目录package.json中的version字段格式是否符合语义化版本规范（例如1.0.0，不能包含空格、特殊字符或无效格式）
• 检查package.json和package-lock.json中所有依赖的版本号是否合法，避免出现1.0、v2.3.1（部分包不接受带v前缀的版本）这类无效格式
• 本地执行npm ls命令，排查是否有依赖版本冲突或无效版本，修复后再推送代码

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