Angular项目部署Azure静态网站时GitHub Actions构建异常求助

问题1：默认Node.js版本不满足Angular CLI要求 #

Angular CLI 17.0.0要求Node.js版本≥18.13.0，GitHub Actions默认的v16.20.2不达标，需在Workflow中强制指定兼容版本：

• 在Workflow的steps中添加actions/setup-node步骤，匹配本地开发使用的Node.js v21.5.0：

steps:
  - name: 拉取代码
    uses: actions/checkout@v4

  - name: 配置Node.js环境
    uses: actions/setup-node@v4
    with:
      node-version: '21.5.0'
      cache: 'npm' # 可选，缓存依赖加速构建

问题2：升级Node.js后找不到package.json #

该错误核心是工作目录不正确或代码未完整拉取：

1. 确保actions/checkout步骤放在最前面，完整拉取仓库所有代码；
2. 若package.json不在仓库根目录，需在install、build等步骤中指定working-directory参数：

- name: 安装依赖
  working-directory: ./your-project-subdir # 替换为实际项目子目录路径
  run: npm install

- name: 构建Angular项目
  working-directory: ./your-project-subdir
  run: ng build --configuration production

问题3：部署成功但页面空白 #

空白页通常因部署路径错误或Angular构建参数缺失导致：

1. 生产环境构建必须添加--configuration production参数，Angular 17默认将产物输出到dist/[项目名称]/browser目录；
2. 在Azure静态网站部署步骤中，指定正确的构建产物路径：

- name: 部署到Azure静态网站
  uses: Azure/static-web-apps-deploy@v1
  with:
    azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
    app_location: '/' # 项目根目录路径
    api_location: '' # 无后端API则留空
    output_location: 'dist/your-project-name/browser' # 替换为实际构建产物目录

另外，需配置Angular单页应用的路由 fallback，避免刷新页面404。在项目根目录创建staticwebapp.config.json：

{
  "routes": [
    {
      "route": "/*",
      "serve": "/index.html",
      "statusCode": 200
    }
  ]
}

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