'Azure Devops Pipeline - Angular 13 to Azure App Service Error

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

azureazure-devopsazure-pipelinesdevopsazure-appservice


Solution 1:[1]

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.

enter image description here

Solution 2:[2]

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'

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Julio Cachay

Related Questions