Azure DevOps部署Angular应用至Azure静态Web应用失败求助

算力阿峰

2026-8-1

Azure DevOps部署Azure静态Web应用失败：Angular依赖冲突

我的Angular应用通过Azure DevOps流水线部署到Azure静态Web应用，该流程正常运行超过一年，但近三天在部署Azure静态Web应用阶段失败。

流水线YAML配置

# Node.js with Angular
# Build a Node.js project that uses Angular.
# Add steps that analyze code, save build artifacts, deploy, and more:
# https://docs.microsoft.com/azure/devops/pipelines/languages/javascript
trigger:
- main
pool:
  vmImage: ubuntu-latest
steps:
- task: AzureStaticWebApp@0
  inputs:
      app_build_command: "npm install --legacy-peer-deps"
      app_location: "/"
      api_location: "api"
      output_location: "dist/angular-sample-app"
  env:
      azure_static_web_apps_api_token: $(deployment_token_prod)

构建日志详情

平台信息

操作由Microsoft Oryx执行

检测平台中...
检测到以下平台：
  nodejs: 16.18.0
平台'nodejs'的版本'16.18.0'未安装。正在生成安装脚本...
检测到以下框架：Angular,Typescript

Node.js版本信息

正在下载并提取'nodejs'版本'16.18.0'到'/opt/nodejs/16.18.0'...
检测到镜像debian版本：bullseye。
下载完成，耗时0秒。
验证校验和...
解压内容...
正在对nodejs执行sha512校验...
完成，耗时1秒。

移除现有清单文件
如果命令清单文件目录不存在则创建
正在创建清单文件...
Node构建命令清单文件已创建。

使用的Node版本：
v16.18.0

使用的Npm版本：
8.19.2

错误信息

npm ERR! 解析依赖时出错：angular11-sample-app@0.0.0
npm ERR! 已找到：@angular/compiler@13.2.7
npm ERR! node_modules/@angular/compiler
npm ERR!   根项目依赖@angular/compiler@"~13.2.0"
npm ERR! 
npm ERR! 无法解析依赖：
npm ERR! @angular/localize@13.3.12要求对等依赖@angular/compiler@"13.3.12"
npm ERR! node_modules/@angular/localize
npm ERR!   @ng-bootstrap/ng-bootstrap@11.0.1要求对等依赖@angular/localize@"^13.0.0"
npm ERR!   node_modules/@ng-bootstrap/ng-bootstrap
npm ERR!     根项目依赖@ng-bootstrap/ng-bootstrap@"^11.0.0"
npm ERR! 
npm ERR! 修复上游依赖冲突，或使用--force或--legacy-peer-deps参数重试命令
npm ERR! 以接受不正确（可能已损坏）的依赖解析结果。
npm ERR! 
npm ERR! 完整报告请查看/root/.npm/eresolve-report.txt。

npm ERR! 本次运行的完整日志位于：
npm ERR!     /root/.npm/_logs/2023-02-10T08_09_53_305Z-debug-0.log


---Oryx构建日志结束---
Oryx构建解决方案失败。

##[error]错误：进程'/usr/bin/bash'以退出代码1失败

解决方法

核心问题是Angular核心包与依赖包版本不匹配：项目依赖的@angular/compiler是13.2.x版本，但@ng-bootstrap/ng-bootstrap依赖的@angular/localize要求@angular/compiler为13.3.12版本，导致npm安装时依赖解析失败。

可以按以下方式处理：

统一升级Angular核心包版本
执行命令将所有Angular核心包升级到13.3.12，确保版本一致：
```
npm install @angular/core@13.3.12 @angular/compiler@13.3.12 @angular/common@13.3.12 @angular/forms@13.3.12 @angular/platform-browser@13.3.12 @angular/platform-browser-dynamic@13.3.12 @angular/router@13.3.12 --save
```
升级后提交package.json和package-lock.json到仓库，确保流水线安装时使用匹配的依赖版本。
临时强制忽略依赖冲突
如果暂时无法升级依赖，可以修改流水线的构建命令，添加--force参数（仅应急使用，不推荐长期依赖）：
```
app_build_command: "npm install --legacy-peer-deps --force"
```
注意：该参数会强制跳过依赖校验，可能引入运行时未知问题，仅作为临时解决方案。
锁定依赖版本
确保仓库中存在package-lock.json文件并提交，让流水线安装时使用固定版本的依赖，避免远程仓库依赖包更新导致的突发冲突。

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