仅本地出现Angular项目编译错误的问题求助

问题背景 #

运行Angular应用时编译持续报错，这类错误通常能自行解决，但仅在我的PC上出现。我和同事使用完全相同的代码、相同版本的Node，但只有我执行npm start时触发错误。

错误信息 #

package.json配置 #

{
  "name": "project",
  "version": "1.0.0",
  "license": "https://themeforest.net/licenses/terms/regular",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --proxy-config proxy.conf.json",
    "start-hmr": "ng serve --hmr -e=hmr -sm=false",
    "start-hmr-sourcemaps": "ng serve --hmr -e=hmr",
    "build": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --dev",
    "build-stats": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --dev --stats-json",
    "build-prod": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --prod",
    "build-prod-stats": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --prod --stats-json",
    "prod": "node --max_old_space_size=8192 node_modules/@angular/cli/bin/ng  build --prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "b": "node --max_old_space_size=8192 ./node_modules/@angular/cli/bin/ng build --prod --environment=svil --output-hashing=all --base-href ./",
    "s": "scp -r dist/* root@dev.division5.co:/var/www/html/Biglietteria5",
    "ci": "npm run b && npm run s"
  },
  "private": true,
  "dependencies": {
    "@agm/core": "1.0.0-beta.3",
    "@angular/animations": "5.2.3",
    "@angular/cdk": "5.1.1",
    "@angular/common": "5.2.3",
    "@angular/compiler": "5.2.3",
    "@angular/core": "5.2.3",
    "@angular/flex-layout": "2.0.0-beta.12",
    "@angular/forms": "5.2.3",
    "@angular/http": "5.2.3",
    "@angular/material": "5.1.1",
    "@angular/material-moment-adapter": "5.1.1",
    "@angular/platform-browser": "5.2.3",
    "@angular/platform-browser-dynamic": "5.2.3",
    "@angular/router": "5.2.3",
    "@ckeditor/ckeditor5-angular": "^1.2.2",
    "@ctrl/ngx-codemirror": "^1.3.8",
    "@ng-select/ng-select": "^1.5.2",
    "@ngrx/effects": "5.0.0",
    "@ngrx/router-store": "5.0.0",
    "@ngrx/store": "^5.0.0",
    "@ngrx/store-devtools": "5.0.0",
    "@ngx-translate/core": "^9.1.1",
    "@ngx-translate/http-loader": "^2.0.1",
    "@nomadreservations/ngx-codemirror": "^2.0.0",
    "@swimlane/ngx-charts": "7.0.1",
    "@swimlane/ngx-datatable": "11.1.7",
    "@swimlane/ngx-dnd": "3.1.0",
    "@types/prismjs": "1.9.0",
    "angular-calendar": "0.23.3",
    "angular-in-memory-web-api": "0.5.3",
    "angular-notifier": "^6.0.1",
    "angular2-multiselect-dropdown": "^2.9.0",
    "angular2-text-mask": "^9.0.0",
    "classlist.js": "1.1.20150312",
    "codemirror": "^5.39.2",
    "cookieconsent": "^3.1.1",
    "core-js": "2.5.3",
    "d3": "4.13.0",
    "date-fns": "^2.9.0",
    "detect-browser": "^4.8.0",
    "fabric": "^2.4.3",
    "file-saver": "^2.0.2",
    "fontfaceobserver-es": "^3.3.1",
    "hammerjs": "2.0.8",
    "intl": "1.2.5",
    "keycloak-angular": "^2.1.0",
    "keycloak-js": "^4.8.3",
    "moment": "2.20.1",
    "ng-modal-lib": "0.0.6",
    "ng-recaptcha": "^5.0.0",
    "ng2-currency-mask": "^5.3.1",
    "ng2-file-upload": "^1.3.0",
    "ng5-slider": "^1.2.4",
    "ngrx-store-freeze": "0.2.1",
    "ngx-clipboard": "^10.0.0",
    "ngx-color-picker": "5.3.1",
    "ngx-cookie-service": "^2.2.0",
    "ngx-cookieconsent": "^2.2.3",
    "ngx-drag-drop": "^1.1.0",
    "ngx-export-as": "^1.3.0",
    "ngx-infinite-scroll": "^0.8.4",
    "ngx-mask": "^7.3.3",
    "ngx-pagination": "^4.0.0",
    "ngx-toggle-switch": "^2.0.5",
    "ngx-virtual-scroller": "^3.0.3",
    "ngx-web-worker": "0.0.2",
    "perfect-scrollbar": "1.3.0",
    "print-js": "^1.0.54",
    "prismjs": "1.11.0",
    "rxjs": "5.5.6",
    "rxjs-compat": "^6.2.2",
    "text-mask-addons": "^3.8.0",
    "web-animations-js": "2.3.1",
    "zone.js": "0.8.20"
  },
  "devDependencies": {
    "@angular/cli": "1.6.7",
    "@angular/compiler-cli": "5.2.3",
    "@angular/language-service": "5.2.3",
    "@angularclass/hmr": "2.1.3",
    "@types/codemirror": "0.0.58",
    "@types/google.analytics": "^0.0.42",
    "@types/googlemaps": "^3.30.15",
    "@types/jasmine": "2.8.6",
    "@types/jasminewd2": "2.0.3",
    "@types/node": "6.0.96",
    "codelyzer": "4.1.0",
    "increase-memory-limit": "^1.0.3",
    "jasmine-core": "2.8.0",
    "jasmine-spec-reporter": "4.2.1",
    "karma": "2.0.0",
    "karma-chrome-launcher": "2.2.0",
    "karma-coverage-istanbul-reporter": "1.4.1",
    "karma-jasmine": "1.1.1",
    "karma-jasmine-html-reporter": "0.2.2",
    "node-sass": "^4.14.1",
    "protractor": "5.1.2",
    "ts-node": "4.1.0",
    "tslint": "5.9.1",
    "typescript": "2.6.2",
    "webpack-bundle-analyzer": "2.10.0"
  }
}

排查方案 #

因为代码、Node版本和同事完全一致，优先排查本地环境差异：

• 清理依赖缓存
  删除node_modules文件夹：rm -rf node_modules（Windows用rmdir /s /q node_modules），执行npm cache clean --force清理缓存后，重新运行npm install

• 核对代理配置
  确认本地proxy.conf.json文件内容和同事完全一致，缺失或错误的代理配置会导致启动失败

• 检查Node版本细节
  执行node -v和npm -v确认版本和同事完全匹配（包括小版本号）；若用nvm管理Node，执行nvm list确认当前使用版本正确，必要时用nvm use [版本号]切换

• 清理Angular编译缓存
  执行ng cache clean（旧版Angular CLI）或npm run ng cache clean清除编译缓存

• 检查系统权限
  确认当前用户对项目文件夹有完整读写权限，避免依赖安装或编译时因权限不足报错

• 排查网络限制
  临时关闭本地防火墙或全局代理，重新安装依赖测试，排除网络环境导致的依赖下载异常

内容的提问来源于stack exchange，提问作者Glenis Tivari