Azure Pipelines Cache Task and ng is not recognized

Question

I'm trying to cache my node_modules to improve the build performance.

This is the yaml:

pool:
  vmImage: 'windows-latest'

variables:
  ngWorkingDir: 'src\XXX\client'
  npm_config_cache: $(Pipeline.Workspace)/.npm
  CacheRestored: False

steps:
- task: Cache@2
  inputs:
    key: 'npm | "$(Agent.OS)" | $(ngWorkingDir)/package-lock.json'
    restoreKeys: |
       npm | "$(Agent.OS)"
    path: '$(npm_config_cache)'     
    cacheHitVar: CacheRestored
  displayName: Cache npm

- task: Npm@1
  displayName: 'install node modules'
  inputs:
    workingDir: '$(ngWorkingDir)'
    verbose: false
  condition: eq(variables['CacheRestored'], False)

- task: Npm@1
  displayName: ng lint
  inputs:
    command: 'custom'
    workingDir: '$(ngWorkingDir)'
    verbose: false
    customCommand: 'run lint'

This is the output:

I'm not able to get the ng lint command working. I tried to install the angular cli globally as first step. But this also doesn't help.

Answer 1

$(Pipeline.Workspace)/.npm doesn't have your npm modules. This is npm cache, but your modules are still installed close to your project.

Please check this

# Node.js
# Build a general Node.js project with npm.
# Add steps that analyze code, save build artifacts, deploy, and more:
# https://learn.microsoft.com/azure/devops/pipelines/languages/javascript

trigger:
- master

strategy:
  matrix:
    linux 16 Uncached:    
      VM_IMAGE: ubuntu-16.04
      ENABLE_CACHE: 0
    linux 18 Uncached:
      VM_IMAGE: ubuntu-18.04
      ENABLE_CACHE: 0
    windows 2017 Uncached:
      VM_IMAGE: vs2017-win2016
      ENABLE_CACHE: 0
    linux 16:    
      VM_IMAGE: ubuntu-16.04
    linux 18:
      VM_IMAGE: ubuntu-18.04
    windows 2017:
      VM_IMAGE: vs2017-win2016
pool:
  vmImage: $(VM_IMAGE)

variables:
  # ignore this
  skipComponentGovernanceDetection: true
  
  # override where npm will use the cache per https://www.npmjs.com/package/config-cache
  npm_config_cache: $(Pipeline.Workspace)/.npm

  # the node_modules (and maybe the npm cache) cannot be reused across versions
  # This is probably not strictly needed because we are using the NodeTool installer to lock on a specific version.
  node_version_file: $(Pipeline.Workspace)/node.version.txt

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

# only look for the exact match for node_modules
- script: node --version > $(node_version_file)
- task: Cache@2
  inputs:
    key: '"node_modules $(VM_IMAGE)" | $(node_version_file) | node.js-with-npm/package.json | node.js-with-npm/package-lock.json'
    path: 'node.js-with-npm/node_modules'
    cacheHitVar: NODE_MODULES_RESTORED
  displayName: 'Cache node_modules'
  condition: ne(variables.ENABLE_CACHE, '0')
  
# if we didn't get an match for node_modules, see if we have a recent copy of the .npm cache folder
- task: Cache@2
  inputs:
    key: '".npm $(VM_IMAGE)" | $(node_version_file) | node.js-with-npm/package.json | node.js-with-npm/package-lock.json'
    restoreKeys: |
      ".npm $(VM_IMAGE)" | $(node_version_file) | node.js-with-npm/package.json
      ".npm $(VM_IMAGE)" | $(node_version_file)
    path: $(npm_config_cache)
  displayName: 'Cache .npm'
  condition: and(ne(variables.NODE_MODULES_RESTORED, 'true'), ne(variables.ENABLE_CACHE, '0'))

# at this point either:
# 1. we have an exact node_modules folder and NODE_MODULES_RESTORED=='true'
# or
# 2. we have no node_modules folder and NODE_MODULES_RESTORED!='true'
- script: |
    cd node.js-with-npm
    npm ci
  displayName: 'npm ci'
  condition: ne(variables.NODE_MODULES_RESTORED, 'true')

It actually does two kind of caching:

• npm modules
• npm cache

And since you restore only npm cache you don't find ng installed on host agent (as I assumed that you install locally).