Azure Dev Ops Deploying Angular Application To Static Web App

Question

I want to deploy an Angular application to an Azure Static Web Application.The build part works fine but the release errors and says it can not find the build artifact : Directory Location: 'dist' is invalid. Could not detect this directory. Please verify your deployment configuration file reflects your repository structure.

This is the YAML used for the application publish, screenshot below that.

steps:
- task: PublishBuildArtifacts@1
  displayName: 'Publish Artifact: dist'
  inputs:
    PathtoPublish: dist
    ArtifactName: dist

Static Web App templete

So it seems that we are not using the correct publish location but not sure what to use.

The following is the YAML from the pipeline :

steps:
- task: Npm@1
  displayName: 'npm custom'
  inputs:
    command: custom
    verbose: false
    customCommand: 'install @angular/cli -g'

steps:
- task: Npm@1
  displayName: 'npm install'
  inputs:
    verbose: false

steps:
- task: Npm@1
  displayName: 'npm build'
  inputs:
    command: custom
    verbose: false
    customCommand: 'run build -- --configuration=production'

steps:
- task: PublishBuildArtifacts@1
  displayName: 'Publish Artifact: dist'
  inputs:
    PathtoPublish: dist/CarehomeBooking
    ArtifactName: dist

The directory structure of the built Angular app is :

AngularBuiltCode

Could you please share your Pipeline code and directory structure of your artifact? — Andriy Bilous
– Andriy Bilous, Commented Aug 11, 2021 at 9:54

rickvdbosch · Accepted Answer · 2021-08-11 10:01:31Z

2

The PathToPublish needs to have the output folder of the ng build action. Please make sure to build a release version of your project. You might need to run either ng build --prod, ng build --configuration production or simply ng build to make sure you build a release version depending on what version of Angular (CLI) you are on.

The default output path for current Angular projects is: dist/<projectName>

Find your output path by opening up the angular.json file and looking at the outputPath under architect -> build -> options.

Also: make sure you run the command from the root of the project or specify the full path.

answered Aug 11, 2021 at 10:01

rickvdbosch

15.8k2 gold badges47 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Matthew Watts Over a year ago

Hi, I tried making some of your suggested changes but I now get the error : 2021-08-11T17:07:51.4931321Z [37mDetecting platforms...[0m 2021-08-11T17:09:00.4466669Z [31mError: Oops... An unexpected error has occurred.[0m

Matthew Watts Over a year ago

I have added a screenshot of the built Angular artefact to the original question.

Collectives™ on Stack Overflow

Azure Dev Ops Deploying Angular Application To Static Web App

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related