Build failing with cached npm after dependency updates-CodePudding

I have a pipeline that does an npm install followed by angular build and recently i added a caching task to relieve installation which was working splendidly until the developer added a new private dependency "runtime-config-loader": "^3.0.0" This may require npm re-install again, however, for some reason the caching task doesnt think it requires a re-install, and so it skips over the npm install and then fails at the angular build, most likely because npm did not re-install on the agent. I disabled the caching task and removed the custom condition eq(variables['CACHE_RESTORED'],False) from the npm install task, and the build is succeeding just fine.

Why is the cache not recognizing the need to re-install dependencies again? and how do i delete the cache so that npm installs again? As a reminder, when i disable the cache task and npm re-installs again on the agent, the build succeeds. so this is certainly a caching problem

here is the build YAML:

steps:
- task: Cache@2
  displayName: 'npm Cache'
  inputs:
    key: 'npm | "$(Agent.OS)" | $(System.DefaultWorkingDirectory)/EE/Angular/package-lock.json'
    path: '$(System.DefaultWorkingDirectory)/EE/Angular/node_modules'
    cacheHitVar: 'CACHE_RESTORED'
    restoreKeys: 'npm | "$(Agent.OS)"'
  enabled: false
  
steps:
- task: Npm@1
  displayName: 'npm install'
  inputs:
    command: custom
    workingDir: EE/Angular
    verbose: false
    customCommand: 'install --legacy-peer-deps'
  condition: eq(variables['CACHE_RESTORED'],False)
  
steps:
- task: Npm@1
  displayName: 'npm custom: angular build'
  inputs:
    command: custom
    workingDir: EE/Angular
    verbose: false
    customCommand: 'run-script build -- --prod'

Old package.json file which the build WITH cache was working fine with

{
    "name": "angular",
    "version": "11.2.14",
    "scripts": {
        "ng": "ng",
        "start": "ng serve",
        "build": "ng build",
        "test": "ng test",
        "lint": "ng lint",
        "e2e": "ng e2e"
    },
    "private": true,
    "dependencies": {
        "@angular/animations": "11.2.14",
        "@angular/cdk": "10.2.3",
        "@angular/common": "^11.2.14",
        "@angular/compiler": "11.2.14",
        "@angular/core": "11.2.14",
        "@angular/forms": "11.2.14",
        "@angular/localize": "11.2.14",
        "@angular/platform-browser": "11.2.14",
        "@angular/platform-browser-dynamic": "11.2.14",
        "@angular/router": "11.2.14",
        "@fortawesome/angular-fontawesome": "0.8.2",
        "@fortawesome/fontawesome-svg-core": "^1.2.28",
        "@fortawesome/free-brands-svg-icons": "^5.13.0",
        "@fortawesome/free-regular-svg-icons": "^5.13.0",
        "@fortawesome/free-solid-svg-icons": "^5.13.0",
        "@ng-bootstrap/ng-bootstrap": "9.1.3",
        "@ng-idle/core": "^10.0.0-beta.1",
        "@ng-idle/keepalive": "^10.0.0-beta.1",
        "@ng-select/ng-select": "7.0.0",
        "css-what": "^5.0.1",
        "hammerjs": "^2.0.8",
        "highcharts": "9.1.2",
        "highcharts-angular": "2.10.0",
        "html2pdf.js": "0.9.3",
        "jspdf": "^2.3.1",
        "ng-multiselect-dropdown": "0.3.4",
        "ngx-cookie-service": "11.0.2",
        "rxjs": "^6.5.4",
        "rxjs-compat": "^6.5.4",
        "tslib": "^2.0.0",
        "xmldom": "^0.5.0",
        "zone.js": "~0.10.2"
    },
    "devDependencies": {
        "@angular-devkit/build-angular": "~0.1102.14",
        "@angular/cli": "11.2.14",
        "@angular/compiler-cli": "11.2.14",
        "@angular/language-service": "11.2.14",
        "@types/jasmine": "~3.3.8",
        "@types/jasminewd2": "~2.0.3",
        "@types/node": "^12.11.1",
        "codelyzer": "^5.1.2",
        "jasmine-core": "~3.5.0",
        "jasmine-spec-reporter": "~5.0.0",
        "karma": "^6.3.4",
        "karma-chrome-launcher": "~3.1.0",
        "karma-coverage-istanbul-reporter": "~3.0.2",
        "karma-jasmine": "~4.0.0",
        "karma-jasmine-html-reporter": "^1.5.0",
        "protractor": "~7.0.0",
        "ts-node": "~7.0.0",
        "tslint": "~6.1.0",
        "typescript": "4.1.2"
    }
}

new package.json file

{
    "name": "angular",
    "version": "11.2.14",
    "scripts": {
        "ng": "ng",
        "start": "ng serve",
        "build": "ng build",
        "test": "ng test",
        "lint": "ng lint",
        "e2e": "ng e2e"
    },
    "private": true,
  "dependencies": {
    "@angular/animations": "11.2.14",
    "@angular/cdk": "^11.2.13",
    "@angular/common": "^11.2.14",
    "@angular/compiler": "11.2.14",
    "@angular/core": "11.2.14",
    "@angular/forms": "11.2.14",
    "@angular/localize": "11.2.14",
    "@angular/platform-browser": "11.2.14",
    "@angular/platform-browser-dynamic": "11.2.14",
    "@angular/router": "11.2.14",
    "@fortawesome/angular-fontawesome": "0.8.2",
    "@fortawesome/fontawesome-svg-core": "^1.2.28",
    "@fortawesome/free-brands-svg-icons": "^5.13.0",
    "@fortawesome/free-regular-svg-icons": "^5.13.0",
    "@fortawesome/free-solid-svg-icons": "^5.13.0",
    "@ng-bootstrap/ng-bootstrap": "9.1.3",
    "@ng-idle/core": "^11.1.0",
    "@ng-idle/keepalive": "^11.0.3",
    "@ng-select/ng-select": "^6.1.0",
    "css-what": "^5.0.1",
    "hammerjs": "^2.0.8",
    "highcharts": "9.1.2",
    "highcharts-angular": "2.10.0",
    "html2pdf.js": "0.9.3",
    "jasmine": "^3.8.0",
    "jspdf": "^2.3.1",
    "ng-multiselect-dropdown": "0.3.4",
    "ngx-cookie-service": "11.0.2",
    "runtime-config-loader": "^3.0.0",
    "rxjs": "^6.6.0",
    "rxjs-compat": "^6.5.4",
    "tslib": "^2.0.0",
    "xmldom": "^0.5.0",
    "zone.js": "^0.11.3"
  },
    "devDependencies": {
        "@angular-devkit/build-angular": "~0.1102.14",
        "@angular/cli": "11.2.14",
        "@angular/compiler-cli": "11.2.14",
        "@angular/language-service": "11.2.14",
        "@types/jasmine": "~3.3.8",
        "@types/jasminewd2": "~2.0.3",
        "@types/node": "^12.11.1",
        "codelyzer": "^6.0.0",
        "jasmine-core": "^3.8.0",
        "jasmine-spec-reporter": "~5.0.0",
        "karma": "^6.3.4",
        "karma-chrome-launcher": "~3.1.0",
        "karma-coverage-istanbul-reporter": "~3.0.2",
        "karma-jasmine": "~4.0.0",
        "karma-jasmine-html-reporter": "^1.5.0",
        "protractor": "~7.0.0",
        "ts-node": "^8.3.0",
        "tslint": "~6.1.0",
        "typescript": "^4.1.5"
    }
}

CodePudding user response：

It doesn't work because the new dependency is obviously not in the cache. Also the npm install doesn't run. So that dependency is missing during build.

To fix it, you need to always run the npm install, because you never know if there is a new dependency. Also, after install, if there were new dependencies installed, you should update the cache.