why is azure build pipeline not generating a dist folder for an angular build

Question

It seem like the folder that are getting generated during the build are getting deleted before I could ran any other task dist folder.

 trigger:
    - master
    
    pool: default
    
    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'
    
    #i added this task and it seems like the node_modules and the dist 
    #folder that was generated during the build are not getting copied to the (a)directory 
    #only the source code get copied. it seems like the folders are getting
    #deleted even before the #PublishPipelineArtifact@1 task ran
    
    - task: PublishPipelineArtifact@1
      inputs:
        targetPath: '$(Pipeline.Workspace)/s'
        publishLocation: 'pipeline'

I also trying outputting the build in the

Sievert

What kind of agent are you using? Also can you insert this before your publish pipeline task? This will recursively spit out the output of your folder so can confirm that the npm install is actually working: '-powershell: Get-ChildItem -Path '/home/vsts/work/1' -recurse' – Lightner

I am using windows 10. I have npm installed and I have the cli installed – Sievert

The question was around what kind of agent are you running. Self hosted on Prem agent or an agent out in Azure?. – Lightner

I am running a self hosted agent on my machine == on prem the os is windows 10, when I ran it with an ubuntu agent on azure every thing seems to work fine but when run it with windows-latest I have the same issue i am having with my local agent with dist folder not being generated – Sievert

specifying vmImage:'ubuntu-latest' worked for me, couldn't get it working on windows agent. – Virescent

I think I got the same issu, Build for Vuejs not generate dist folder. my problem is I got a private windows agent. – Management

@Management the way i got pass issue was to use a powershell to do the build on a windows agent. that was my work around - task: PowerShell@2 inputs: targetType: 'inline' script: | # Write your PowerShell commands here. npm install -g @angular/cli npm install ng build --prod – Sievert

Well, time has passed, but now I'm having exactly this issue: no "dist" folder generation on windows-latest. Even worst, now it is not working neither for "ubuntu-latest", nor powershell. It was working a couple of weeks ago – Socket

Answer 1

Firstly separate npm install script with ng build script. Secondly, I was running npm build instead of ng build. It took me a few hours to notice. This resolved my dist folder not being created issue.

- script: |
    npm ci
  displayName: 'npm install'

- script: |
    ng build --prod
  displayName: 'ng build'

Obstinacy

Answer 2

I had the Same issue where i failed to locate the dist folder, but it seemed i was only missing ./ in front of dist on CopyFiles@2 task.

Below is a working build pipeline for a dev/main branch of a angular application.

trigger:
- main
- dev

pool:
  vmImage: ubuntu-latest

jobs:
  - job: 'Dev_build'
    condition: and(succeeded(), eq(variables['build.sourceBranch'], 'refs/heads/dev'))
    steps:
    - task: NodeTool@0
      inputs:
        versionSpec: '16.x'
      displayName: 'Install Node.js'

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

  # Used to diagnostic the file structure
  #  - task: Bash@3
  #    inputs:
  #      targetType: 'inline'
  #      script: 'find -name node_modules -prune -o -print'
  
    - task: CopyFiles@2
      inputs:
        SourceFolder: './dist'
        Contents: '**'
        TargetFolder: '$(build.artifactstagingdirectory)'

    - task: PublishBuildArtifacts@1
      displayName: 'Publish Artifact'
      inputs:
        PathtoPublish: '$(build.artifactstagingdirectory)'
        ArtifactName: 'www'


  - job: 'Prod_build'
    condition: and(succeeded(), eq(variables['build.sourceBranch'], 'refs/heads/main'))
    steps:
    - task: NodeTool@0
      inputs:
        versionSpec: '16.x'
      displayName: 'Install Node.js'

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

    - task: CopyFiles@2
      inputs:
        SourceFolder: './dist'
        Contents: '**'
        TargetFolder: '$(build.artifactstagingdirectory)'

    - task: PublishBuildArtifacts@1
      displayName: 'Publish Artifact'
      inputs:
        PathtoPublish: '$(build.artifactstagingdirectory)'
        ArtifactName: 'www'

Kweichow

Answer 3

In my case dist folder was added to my .gitignore file after updating my .gitignore file dist folder was created.

Neckar

This does not provide an answer to the question. Once you have sufficient reputation you will be able to comment on any post; instead, provide answers that don't require clarification from the asker. - From Review – Adipocere