【问题标题】:Build failing with cached npm after dependency updates依赖项更新后使用缓存的 npm 构建失败
【发布时间】:2022-01-13 00:48:30
【问题描述】:

我有一个管道,它执行npm install,然后是角度构建,最近我添加了一个缓存任务来减轻安装,在开发人员添加一个新的私有依赖项 "runtime-config-loader": "^3.0.0" 之前,它运行良好。

这可能需要再次重新安装 npm,但是,由于某种原因,缓存任务认为它不需要重新安装,因此它会跳过 npm install,然后在 Angular 构建中失败,很可能因为 npm 没有在代理上重新安装。

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

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

这是构建 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"
    }
}

【问题讨论】:

  • 我理解你为什么这样做,但我认为缓存 node_modules 不是一个好主意。使用npm ci 而不是npm install 安装依赖项怎么样?那应该快得多。
  • @JSONDerulo 很有趣,为什么缓存不是一个好主意?安装大约需要 15 分钟,所以微软是推荐我使用缓存任务的人,但我对你的看法很好奇 :) 还有你的意思是什么 npm ci? npm task 不是 npm ci 吗?
  • @JSONDerulo 好的,所以我只是尝试了npm ci 而不是npm install(只是在 npm 任务中选择了 ci 选项而不是 install 选项)。我确实注意到了改进,但是我什至首先使用缓存的原因是由于某种原因其中一个管道使用 npm install 需要超过 15 分钟,因此 Microsoft 建议使用缓存。我禁用了此管道上的缓存并让npm ci 运行,这次安装在
  • 添加了答案。但是我仍然认为这不是最好的解决方案。过去,我在 Windows 构建代理上也经历过非常缓慢的 npm 安装。您是否尝试过切换到 linux 代理?这对我们来说要快得多(从 > 10 分钟降至

标签: angular npm azure-pipelines


【解决方案1】:

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

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

【讨论】:

  • 但这就是我想要做的:如何强制安装?由于我的条件,安装任务被跳过。尽管如此,不知何故,当我使用 npm ci 并禁用缓存时,下次我启用缓存时,角度构建以某种方式工作,我想知道发生了什么,但我想它现在可以工作了?‍♂️而且我们已经使用了 linux 代理。
猜你喜欢
  • 2019-08-27
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2019-10-10
  • 1970-01-01
  • 2016-06-23
  • 2019-12-04
  • 1970-01-01
相关资源
最近更新 更多