How to use pipeline caching in Azure devOps to cache Angular and .NET dependencies?

Question

I am working on build pipeline in Azure DevOps. I have Angular 14 and .NET 6.0 applications in my yaml. Below is my yaml. Everything is working fine except when I am using cache in my step.

I have 2 questions:

1. Is it necessary to run npm install and other npm dependencies every time I do build pipeline?
2. What is the issue for my below yaml file when I use the Cache@2 step?

YAML:

    variables:
    - name: solution
      value: 'MyApp.sln'
    - name: buildPlatform
      value: 'Any CPU'
    - name: buildConfiguration
      value: 'Release'
    - name: "npm_config_cache"
      value: $(Pipeline.Workspace)/.npm
    
    stages:
    - stage: StartAzVMAgent
      jobs:
      - job: MsHostedAgentJobStartAzVM
        timeoutInMinutes: 0
        pool:
          vmImage: 'windows-latest'
        steps:
        - task: AzureCLI@2
          displayName: Azure CLI
          inputs:
            azureSubscription: "Az-DevOps-AgentManager"
            scriptType: ps
            scriptLocation: inlineScript
            inlineScript: |
              az --version
              az account show
              az vm start --name  MyDeployment-Agent --no-wait --resource-group MyDeployment
    
    - stage: __default
      jobs:
      - job: Job
        timeoutInMinutes: 0
        pool:
          name: Default
          demands:
          - Use_for -equals myAgentMachine
        steps:
         - task: Npm@1
           displayName: Install Node dependencies (packages)
           inputs:
             command: custom
             customCommand: install --save --legacy-peer-deps 
             workingDir: 'MyApp.WebUI\MyClientApp'
            
         - task: Npm@1
           displayName: Install Node dependencies (packages)
           inputs:
             command: custom
             customCommand: install sweetalert2 file-saver 
             workingDir: 'MyApp.WebUI\MyClientApp'
             
        - task: Cache@2
          displayName: Cache npm
          inputs:
            key: 'npm | "$(Agent.OS)" | **/package-lock.json'
            restoreKeys: |
              npm | "$(Agent.OS)"
            path: $(npm_config_cache)
        - script: npm ci
    
        - task: CmdLine@2
          displayName: Building Client App
          inputs:
            script: node --max_old_space_size=8192 node_modules/@angular/cli/bin/ng build  --configuration production --aot --build-optimizer=true --common-chunk=true  --named-chunks=false --optimization=true --vendor-chunk=true --progress=true
            workingDirectory: 'MyApp.WebUI\MyClientApp'
            
        - task: CopyFiles@2
          displayName: 'Copy Client Project'
          inputs:
            Contents: |
              MyApp.WebUI\MyClientApp\dist\**
            TargetFolder: '$(build.artifactstagingdirectory)/client'
            flattenFolders: false
            CleanTargetFolder: true
            
        - task: UseDotNet@2
          displayName: Use .NET 6.0
          inputs:
              packageType: 'sdk'
              version: '6.0.x'
              installationPath: $(Agent.ToolsDirectory)/dotnet
              
        - task: DotNetCoreCLI@2
          inputs:
            command: 'publish'
            publishWebProjects: true
            zipAfterPublish: true
            arguments: '--output $(build.artifactstagingdirectory)/api'
    
        - task: CmdLine@2
          displayName: Create EF Scripts
          inputs:
            script: |
              dotnet ef migrations add  FreshDb_08022021  -c MyAppDbcontext
              dotnet ef migrations script   --idempotent  --output migrations.sql --project MyApp.Persistence/MyApp.Persistence.csproj --context MyAppDbContext
       
       - task: CopyFiles@2
          displayName: 'Copy EF Scripts to Staging'
          inputs:
            Contents: "**\\migrations.sql \n"
            TargetFolder: '$(build.artifactstagingdirectory)'
            flattenFolders: true
      
        - task: PublishBuildArtifacts@1
          inputs:
            PathtoPublish: '$(Build.ArtifactStagingDirectory)'
            ArtifactName: 'drop'
            publishLocation: 'Container'
    
    - stage: StoptAzVMAgent
      dependsOn: __default
      condition: always()
      jobs:
      - job: MsHostedAgentJobStopAZVm
        timeoutInMinutes: 0
        pool:
          vmImage: 'windows-latest'
        steps:
        - task: AzureCLI@2
          displayName: Azure CLI
          inputs:
            azureSubscription: "Az-DevOps-AgentManager"
            scriptType: ps
            scriptLocation: inlineScript
            inlineScript: |
              az --version
              az account show
              az vm deallocate --name MyDeployment-Agent --no-wait --resource-group MyDeployment

Error: npm ERR! The npm ci command can only install with an existing package-lock.json or npm ERR! npm-shrinkwrap.json with lockfileVersion >= 1. Run an install with npm@5 or npm ERR! later to generate a package-lock.json file, then try again.

Answer 1

Not really an expert on Azure Pipelines, but this link might help: https://learn.microsoft.com/en-us/azure/devops/pipelines/release/caching?view=azure-devops#nodejsnpm Basically, you have to have a package-lock.json file in your project for the caching to work.