依赖项更新后使用缓存的 npm 构建失败

Question

我有一个管道执行 npm install 然后 angular 构建，最近我添加了一个缓存任务来减轻安装，在开发人员添加新的私有依赖项 "runtime-config-loader": "^3.0.0".

这可能需要重新安装 npm，但是，出于某种原因，缓存任务认为它不需要重新安装，因此它跳过了 npm install，然后在 angular 构建，很可能是因为 npm 没有在代理上重新安装。

我禁用了缓存任务并从 npm install 任务中删除了自定义条件 eq(variables['CACHE_RESTORED'],False)，并且构建成功。

为什么缓存无法识别需要再次重新安装依赖项？以及如何删除缓存以便再次安装 npm？提醒一下，当我禁用缓存任务并在代理上再次重新安装 npm 时，构建成功 - 所以这肯定是一个缓存问题。

这里是 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'

旧 package.json 文件 构建 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"
    }
}

新建package.json文件:

{
    "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"
    }
}

Answer 1

不行，因为新的依赖显然不在缓存中。 npm install 也没有运行。因此在构建过程中缺少依赖项。

要修复它，您需要始终运行 npm install，因为您永远不知道是否有新的依赖项。此外，安装后，如果安装了新的依赖项，您应该更新缓存。

依赖项更新后使用缓存的 npm 构建失败

Build failing with cached npm after dependency updates

npm

azure-pipelines

angular