部署Angular应用到Heroku时遭遇EACCES权限错误，求解决办法

本地执行ng build构建Angular应用完全正常，但部署到Heroku时触发EACCES权限错误，已尝试删除package-lock.json和node_modules后重新npm install，问题依旧。

错误信息 #

Compiling @angular/core : es2015 as esm2015
       
chunk {main} main.js, main.js.map (main) 592 bytes [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 637 bytes [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 49.6 kB [initial] [rendered]
ERROR in EACCES: permission denied, open '/tmp/build_5fc79d16/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js'
Date: 2023-01-07T00:28:38.382Z - Hash: dcb91659efb59917b4c9 - Time: 5632ms
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! microsoft-login@0.0.0 heroku-postbuild: `ng build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the microsoft-login@0.0.0 heroku-postbuild script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR!     /tmp/npmcache.3gKmp/_logs/2023-01-07T00_28_38_419Z-debug.log

问题分析 #

1. ngcc权限限制：Angular Ivy的兼容性编译器（ngcc）在构建时会尝试修改node_modules目录下的文件，但Heroku构建环境的运行用户没有该目录的写入权限，导致报错。
2. Node版本过旧：当前使用的Node 10.13.0属于老旧版本，在Heroku的容器化环境中可能存在文件权限管理的兼容性问题。
3. Heroku缓存异常：Heroku会缓存过往构建的node_modules和产物，缓存中的文件权限可能出现异常，导致后续构建失败。

修复方法 #

方法1：跳过ngcc编译 #

修改package.json中的heroku-postbuild命令，添加--no-ngcc参数，禁止ngcc运行：

"heroku-postbuild": "ng build --prod --no-ngcc"

原理：Angular 10+的生产构建默认会触发ngcc处理依赖，跳过这一步可以避免对node_modules的写入操作，绕开权限限制。

方法2：升级Node和npm版本 #

更新package.json中的engines字段，使用更稳定的LTS版本（推荐Node 14.x）：

"engines":{"node":"14.21.3","npm":"6.14.18"},

原理：旧Node版本在Heroku环境中存在权限管理的已知问题，升级到维护期内的版本可以解决这类兼容性问题。

方法3：清空Heroku构建缓存 #

在本地终端执行以下命令，清除Heroku的构建缓存：

heroku builds:cache:purge

原理：缓存中的异常文件权限会持续影响后续构建，清空缓存后重新拉取依赖、构建应用即可消除权限问题。

原始package.json #

{
  "name": "microsoft-login",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "node server.js",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "heroku-postbuild": "ng build --prod"
  },
  "engines":{"node":"10.13.0","npm":"6.11.0"},
  "private": true,
  "dependencies": {
    "@angular/animations": "~10.1.6",
    "@angular/common": "~10.1.6",
    "@angular/compiler": "~10.1.6",
    "@angular/core": "~10.1.6",
    "@angular/forms": "~10.1.6",
    "@angular/platform-browser": "~10.1.6",
    "@angular/platform-browser-dynamic": "~10.1.6",
    "@angular/router": "~10.1.6",
    "@azure/msal-angular": "^2.0.0-alpha.6",
    "@azure/msal-browser": "^2.11.2",
    "msal": "^1.4.6",
    "rxjs": "~6.6.0",
    "tslib": "^2.0.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1001.7",
    "@angular/cli": "~10.1.7",
    "@angular/compiler-cli": "~10.1.6",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.0.0",
    "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.0.2"
  }
}

内容的提问来源于stack exchange，提问作者Nurbek Ss