Azure Devops Pipeline - Angular 13 to Azure App Service Error

Question

I am trying to build a pipeline for a simple angular project in Azure Devops but I keep getting an error that "no such file or directory: D:/a/1/s/dist"

Here is my yaml file

trigger:
- master

pool:
  vmImage: windows-latest

steps:
- task: NodeTool@0
  inputs:
    versionSpec: '10.x'
  displayName: 'Install Node.js'

- script: |
    npm install -g @angular/cli
    npm install
    ng build --prod
  displayName: 'npm install and build'

    
- task: ArchiveFiles@2
  displayName: 'Archive files'
  inputs:
    rootFolderOrFile: '$(System.DefaultWorkingDirectory)/dist'
    includeRootFolder: false
    archiveType: zip
    archiveFile: $(Build.ArtifactStagingDirectory)/$(Build.BuildId).zip
    replaceExistingArchive: true

- upload: $(Build.ArtifactStagingDirectory)/$(Build.BuildId).zip
  artifact: drop

What am I missing? This should be faily simple as this is just a small angular project. It looks like it is not able to build and create dist folder. When I do it manually locally it works fine

wade zhou - MSFT · Accepted Answer · 2022-04-21T08:28:14.563

This is due to the 'dist' is not created under the folder $(System.DefaultWorkingDirectory). The ng build --prod was not successfully executed actually.

Please split the task into 3 ones:

- script: |
    npm install -g @angular/cli
  displayName: 'npm install and build'

- script: |
    npm install
  displayName: 'npm install and build'

- script: |
    ng build --prod --verbose
  displayName: 'npm install and build'

Or add && between the npm command:

- script: |
    npm install -g @angular/cli && npm install && ng build --prod --verbose
  displayName: 'npm install and build'

I have the same issue with you and resolved with separated tasks. with seperated task, it will make sure each step is executed.

Hi @Learn AspNet, is there any update? you can follow the sample for your task, it will make sure each command is ended, so the dist folder will be created, you can also have a check your Angular.json to confirm the output path. Let me know if you have any queries. — wade zhou - MSFT, Apr 25 '22 at 01:39

score 1 · Answer 2 · answered Apr 27 '22 at 00:51

You can try to use workingDir property. This is an extract of a pipeline I am using to publish an angular library artifact. I had a similar problem and found this answer. This is an extract of the pipeline I am using:

- task: Npm@1
  inputs:
    command: 'publish'
    workingDir: 'dist/command-queue'
    publishRegistry: 'useFeed'
    publishFeed: '[my artifacts feed goes here]'
  displayName: 'npm push'

Azure Devops Pipeline - Angular 13 to Azure App Service Error

2 Answers2