Publish angular app as an artifact, what is the path to publish?

Question

I am trying to create an azure pipeline that will build an angular app and push it up to azure blob storage. So far I have a pipeline that has the following YAML :

steps:
- task: NodeTool@0
  displayName: 'Use Node 14.x'
  inputs:
    versionSpec: 14.x
    checkLatest: true

steps:
- task: Npm@1
  displayName: 'Install angular CLI'
  inputs:
    command: custom
    verbose: false
    customCommand: 'install @angular/cli@11.2.10'

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

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

steps:
- script: 'node bundle.js'
  displayName: 'Bundle JS'

steps:
- task: Npm@1
  displayName: 'npm run tests'
  inputs:
    command: custom
    verbose: false
    customCommand: 'run test -- --watch=false --code-coverage'

steps:
- task: PublishTestResults@2
  displayName: 'Publish Test Results'
  inputs:
    testResultsFiles: '**/TESTS-*.xml'
    failTaskOnFailedTests: true

Now I think I need to publish the built JS files, which are in the root in the elements folder. So I tried this task, but it cant seem to find the elements folder :

steps:
- task: PublishBuildArtifacts@1
  displayName: 'Publish Artifact'
  inputs:
    PathtoPublish: '$(System.DefaultWorkingDirectory)/bin/elements/*'
    ArtifactName: InsuranceCalculatorBuildArtifact

What should my PathtoPublish be to find the outputted elements folder?

Answer 1

Your YAML has an obvious syntax error that you add too many extra steps key for each task.

Normally, in one job only has one steps key, and under the steps key is the list of the tasks that need to run in the job.

Below is the basic structure of a job in the YAML pipeline:

jobs:
- job:
  . . .
  steps:
  - task: task1
  - task: task2
  - task: task3
  . . .

To view more details, you can see "Job" and "Steps" in the document about "YAML schema reference".

In you case, if you want to publish the build artifacts of your app to your Azure storage blobs, you can try using the Azure File Copy task.

1. If the build step and the publish step are in the same job, that means these steps are running under the working directly on the same agent machine. So you can directly publish the build artifacts from the path where the artifacts generated.

   For example:

jobs:
- job: BuildAndPublish
  steps:
  - task: NodeTool@0
    displayName: 'Use Node 14.x'
    inputs:
      ...

  - task: Npm@1
    displayName: 'Install angular CLI'
    inputs:
      ...

  - task: Npm@1
    displayName: 'npm install'
    inputs:
      ...

  - task: Npm@1
    displayName: 'npm build'
    inputs:
      ...

  - script: 'node bundle.js'
    displayName: 'Bundle JS'

  - task: Npm@1
    displayName: 'npm run tests'
    inputs:
      ...

  - task: PublishTestResults@2
    displayName: 'Publish Test Results'
    inputs:
      ...

  - task: AzureFileCopy@4
    displayName: 'Publush to Azure storage blobs'
    inputs:
      ...

2. If the the build step and the publish step are in the different jobs, you can do like as below:

   • In the job where the build step is in, after the build step, use the Publish Build Artifacts task to publish the build artifacts to Azure Pipelines from the path path where the artifacts generated.
   • In the job where the publish step is in, before the publish step, use the Download Build Artifacts task to download the build artifacts from Azure Pipelines to a specified path under the working directory of the job.
   • Then use the Azure File Copy task to publish the build artifacts from the specified path to your Azure storage blobs.

   For example:

jobs:
- job: Build
  steps:
  - task: NodeTool@0
    displayName: 'Use Node 14.x'
    inputs:
      ...

  - task: Npm@1
    displayName: 'Install angular CLI'
    inputs:
      ...

  - task: Npm@1
    displayName: 'npm install'
    inputs:
      ...

  - task: Npm@1
    displayName: 'npm build'
    inputs:
      ...

  - script: 'node bundle.js'
    displayName: 'Bundle JS'

  - task: Npm@1
    displayName: 'npm run tests'
    inputs:
      ...

  - task: PublishTestResults@2
    displayName: 'Publish Test Results'
    inputs:
      ...

  - task: PublishBuildArtifacts@1
    displayName: 'Publish Artifact'
    inputs:
      ...

- job: Publish
  steps:
  - task: DownloadBuildArtifacts@0
    displayName: Download Artifact'
    inputs:
      ...

  - task: AzureFileCopy@4
    displayName: 'Publush to Azure storage blobs'
    inputs:
      ...

Answer 2

You will want to copy the /dist folder to artifacts and then publish

given my variables

variables:
    projectRoot: 'src'
    artifactName: 'drop'

Here's what my publish looks like

- task: CopyFiles@2
    displayName: 'Copy dist to artifacts'
    inputs:
        SourceFolder: '$(projectRoot)/dist'
        Contents: '**'
        TargetFolder: '$(build.artifactstagingdirectory)/dist'
        cleanTargetFolder: true

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