Azure CI/CD pipeline Angular failing

Question

With a new build I set up I cant seem to get a solid working YAML setup.

I am trying to build an Angular project and publish it as an artifact.

Here is what I have:

- script: |
    npm install -g @angular/cli
    npm install
    npm uninstall @angular-devkit/build-angular
    npm install @angular-devkit/build-angular
    ng build --prod

- task: Npm@1
  displayName: 'Build Angular'
  inputs:
    command: custom
    workingDir: 'Mpw/Mpw.Web.UI/ClientApp'
    verbose: false
    customCommand: 'run build'
    
- task: CopyFiles@2
  displayName: 'Copy dist to artifacts'
  inputs:
    SourceFolder: 'test/test.UI/ClientApp/dist'
    Contents: '**'
    TargetFolder: 'test/test.UI/ClientApp/dist'
    cleanTargetFolder: true

- task: PublishBuildArtifacts@1
  displayName: 'Publish Artifacts'
  inputs:
    PathtoPublish: '$(Build.ArtifactStagingDirectory)/Application'
    ArtifactName: 'test-uat'

But I get the following error output on the pipeline:

2021-12-20T11:55:12.7224058Z [command]C:\Windows\system32\cmd.exe /D /S /C ""C:\Program Files\nodejs\npm.cmd" run build"
2021-12-20T11:55:18.9961043Z Node packages may not be installed. Try installing with 'npm install'.
2021-12-20T11:55:18.9961498Z 
2021-12-20T11:55:18.9962153Z Could not find the '@angular-devkit/build-angular:browser' builder's node package.
2021-12-20T11:55:18.9962748Z > client-app@0.0.0 build
2021-12-20T11:55:18.9963084Z > ng build
2021-12-20T11:55:18.9963194Z 
2021-12-20T11:55:19.1210342Z ##[warning]Couldn't find a debug log in the cache or working directory
2021-12-20T11:55:19.1215101Z ##[error]Error: Npm failed with return code: 1
2021-12-20T11:55:19.1221947Z ##[section]Finishing: Build Angular

I am not sure if my Yaml is 100% correct

Answer 1

Node packages may not be installed. Try installing with 'npm install'.

• Update the node and angular cli version
• Use command npm install npm@latest . And npm install @angular/cli@latest

Couldn't find a debug log in the cache or working directory

Use the below command for npm task " install gulp -g "

Could not find the '@angular-devkit/build-angular:browser' builder's node package.

Install @angular-devkit/build-angular as dev dependency.

npm install --save-dev @angular-devkit/build-angular

or,

yarn add @angular-devkit/build-angular --dev

For upgrade problem

1. Delete these files/ folders (from your Angular root folder):

   • package-lock.json ( Not the package.json)
   • /node_modules folder
   • /dist folder

2. Execute command (regenerate the package-lock.json and the /node_modules ):

   • $npm install

It is the package-lock.json that causes npm to download old versions of dependencies.

Answer 2

I think you are missing node install task.

Follow the installation instructions here: https://docs.microsoft.com/en-us/azure/devops/pipelines/ecosystems/javascript?view=azure-devops&tabs=code

Answer 3

tl;dr;: if you are getting this error Could not find the '@angular-devkit/build-angular:browser' builder's node package. , try putting your YAML file in the root directory.

Hi @Bike_dotnet, I struggled with this severely; I have a total of 10 pipelines running and the pipeline YAML files are saved in a pipelines folder. I spent countless hours trying to figure out why the builds are not working ONLY on the Angular solution and ONLY using ng build --configuration production ; I even went as far as generating two default Angular projects in version 14 and 15... and I used the same script to no avail, the same error, every single time on now many pipelines, across different Azure DevOps accounts and different default projects as well as my production ready one.

Finally I generated a new default pipelines script that I found created by Microsoft and it is identical to what I have tried with my script before... but this time I saved the script in the root folder and defaulted the name to azure-pipelines.yml ... like magic... it worked, using production configuration and everything. I hope this helps someone.

This works:

pool:
  vmImage: ubuntu-latest

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

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