应用程序构建无法生成工件文件夹Angular Azure Static Web App 部署问题

Question

当我尝试使用 azure devops 构建角度应用程序并部署到 azure 静态 Web 应用程序时，我收到以下错误

应用程序构建无法生成工件文件夹：“dist/harmony-front”。请 确保在您的部署中正确配置此属性 配置文件。

我尝试改变

output_location to / , dist, /dist , dist/harmony-front,

似乎没什么作用

这是部署部分的 yaml 代码

- task: AzureStaticWebApp@0
  inputs:
      app_location: "/"
      api_location: "api"
      output_location: "./dist/harmony-front"
      app_build_command: 'npm run build:prod'
      skip_api_build: true
      verbose: true

  env:
      continueOnError: true
      CUSTOM_BUILD_COMMAND: "npm install --force"
      azure_static_web_apps_api_token: $(deployment_token)

我犯了什么错误

谢谢

Answer 1

我尝试重现相同的结果，并在按照以下步骤操作后获得了积极的结果。

第 1 步：创建一个简单的 Angular 项目并在本地计算机上构建该项目并检查 dist 文件夹。

第 2 步：将代码推送到 Azure Repos。

第3步：创建azure pipeline，如下所示。

trigger: none
pool:
  vmImage: ubuntu-latest
steps:
- task: NodeTool@0
  inputs:
    versionSpec: '18.x'
  displayName: 'Install Node.js'
- script: |
    npm install -g @angular/cli
  displayName: 'install angular cli'
- task: Npm@1
  inputs:
    command: 'install'
  displayName: 'npm install'
- task: Npm@1
  inputs:
    command: 'custom'
    customCommand: 'run build'
  displayName: 'npm build'
- task: Bash@3
  inputs:
    targetType: 'inline'
    script: |
      pwd
      ls -l
      ls -l dist/
- task: AzureStaticWebApp@0
  displayName: 'Deploy Azure static webapp'
  inputs:
    app_location: '/'
    output_location: 'dist/my-app'
  env:
    azure_static_web_apps_api_token: $(static-webapp-token)

第4步：验证结果。

如果您仍然遇到该问题，请验证 AzureStaticWebApp@0 Angular.json 文件中的输出位置路径如下。两条路径必须准确。

Answer 2

就我而言，我的角度应用程序名为“前端”；

文件 angular.json 有 -> "outputPath" : "dist/front-end"

.yml 有 -> 输出位置：“dist/front-end”

上面的配置给了我同样的错误。 我已经使用“ng build”命令在本地构建了应用程序，我发现构建是在路径“dist/front-end/browser”（带有额外的浏览器文件）中生成的。在我使用以下命令更改 .yml 文件中的 output_location 后：

output_location：“远程/前端/浏览器”

问题已解决。

所以，我的建议是尝试在本地生成构建并检查适合您的正确路径。

Answer 3

实际上我发现了这个问题，并将发布以供将来参考。如果有人有同样的问题。

当您使用

CUSTOM_BUILD_COMMAND

 覆盖构建命令时，

问题启动将覆盖

RUN_BUILD_COMMAND

，因此基于 Github 上发布的问题的 评论，而不是

npm install --force

命令与构建相结合，如

npm install --force && npm run build

的效果就像魅力

Answer 4

这个问题刚刚发生在我身上，当时正在准备一个现成的 VUEJS3 NUXT3 模板，唯一的解决方案：

转到 -> Gitignore 删除：.dist 重新上传您的项目

事情会像魅力一样发挥作用！！！！