npm i命令报警告且ng build失败，求问题排查与解决方案

问题详情 #

• 执行npm i时出现警告，但node_modules目录已生成
• 执行ng build时触发报错，所有模块均无法识别（截图如下）
• 当前使用的package.json配置：

{
  "name": "VYIJNLKM",
  "version": "1.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "conventional-changelog": "conventional-changelog",
    "start": "ng serve",
    "build": "ng build",
    "build:prod": "npm run build -- --prod --aot",
    "test": "ng test",
    "test:coverage": "rimraf coverage && npm run test -- --code-coverage",
    "lint": "ng lint",
    "lint:fix": "ng lint ngx-admin-demo --fix",
    "lint:styles": "stylelint ./src/**/*.scss",
    "lint:ci": "npm run lint && npm run lint:styles",
    "pree2e": "webdriver-manager update --standalone false --gecko false",
    "e2e": "ng e2e",
    "docs": "compodoc -p src/tsconfig.app.json -d docs",
    "docs:serve": "compodoc -p src/tsconfig.app.json -d docs -s",
    "prepush": "npm run lint:ci",
    "release:changelog": "npm run conventional-changelog -- -p angular -i CHANGELOG.md -s",
    "postinstall": "ngcc --properties es2015 es5 browser module main --first-only --create-ivy-entry-points --tsconfig \"./src/tsconfig.app.json\""
  },
  "dependencies": {
    "@angular/animations": "^17.3.8",
    "@angular/cdk": "17.3.8",
    "@angular/common": "^17.3.12",
    "@angular/compiler": "^17.3.12",
    "@angular/compiler-cli": "^17.3.12",
    "@angular/core": "^17.3.12",
    "@angular/forms": "^17.3.8",
    "@angular/google-maps": "^17.3.10",
    "@angular/localize": "^17.3.12",
    "@angular/platform-browser": "^17.3.8",
    "@angular/platform-browser-dynamic": "^17.3.8",
    "@angular/router": "^17.3.8",
    "@nebular/auth": "13.0.0",
    "@nebular/eva-icons": "13.0.0",
    "@nebular/security": "13.0.0",
    "@nebular/theme": "13.0.0",
    "@ng-bootstrap/ng-bootstrap": "^16.0.0",
    "@ng-select/ng-select": "^12.0.7",
    "@types/jasmine": "^5.1.4",
    "bootstrap": "^5.3.3",
    "classlist.js": "1.1.20150312",
    "core-js": "3.37.1",
    "crypto-js": "^4.2.0",
    "echarts": "5.5.1",
    "eva-icons": "^1.1.3",
    "file-saver": "^2.0.5",
    "howler": "^2.2.4",
    "html-to-pdfmake": "^2.5.10",
    "intl": "1.2.5",
    "ionicons": "7.4.0",
    "jspdf": "^2.5.1",
    "lz-string": "^1.5.0",
    "nebular-icons": "1.1.0",
    "ng2-completer": "^9.0.1",
    "ngx-echarts": "18.0.0",
    "normalize.css": "8.0.1",
    "pace-js": "1.2.4",
    "pdfmake": "^0.2.10",
    "resize-observer-polyfill": "^1.5.1",
    "roboto-fontface": "0.10.0",
    "rxjs": "7.8.1",
    "rxjs-compat": "6.6.7",
    "sass": "^1.77.8",
    "secure-ls": "^2.0.0",
    "socicon": "3.0.5",
    "style-loader": "^4.0.0",
    "tinymce": "7.2.1",
    "tslib": "^2.6.3",
    "typeface-exo": "1.1.13",
    "web-animations-js": "^2.3.2",
    "zone.js": "~0.14.7"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "17.3.8",
    "@angular/cli": "^17.3.8",
    "@angular/compiler-cli": "^17.3.12",
    "@angular/language-service": "17.3.8",
    "@compodoc/compodoc": "1.1.25",
    "@fortawesome/fontawesome-free": "^6.5.2",
    "@types/d3-color": "3.1.3",
    "@types/file-saver": "^2.0.7",
    "@types/google.maps": "^3.43.3",
    "@types/howler": "^2.2.11",
    "@types/jasminewd2": "^2.0.13",
    "@types/node": "^20.14.10",
    "codelyzer": "^0.0.28",
    "conventional-changelog-cli": "5.0.0",
    "husky": "9.0.11",
    "jasmine-core": "~4.6.0",
    "jasmine-spec-reporter": "~7.0.0",
    "karma": "~6.4.3",
    "karma-chrome-launcher": "~3.2.0",
    "karma-cli": "2.0.0",
    "karma-coverage-istanbul-reporter": "~3.0.3",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "^2.1.0",
    "npm-run-all": "4.1.5",
    "protractor": "~3.3.0",
    "rimraf": "6.0.0",
    "stylelint": "16.6.1",
    "ts-node": "10.9.2",
    "tslint": "~5.20.1",
    "typescript": "5.3.3"
  }
}

相关截图 #

• npm i警告：
  
• ng build报错：
  

解决步骤 #

1. 核心问题：依赖版本不兼容 #

你的Angular版本是17.x，但@nebular组件（13.0.0）只支持Angular 13，版本差距过大导致模块解析失败，这是根本原因。二选一解决：

• 降级Angular到13.x：匹配Nebular 13的版本要求
• 升级Nebular到17.x：安装支持Angular 17的最新版本

2. 清理依赖并重新安装 #

# 删除依赖目录和锁文件
rm -rf node_modules package-lock.json
# 清理npm缓存
npm cache clean --force
# 重新安装依赖
npm install

3. 移除无用的ngcc脚本 #

Angular 17已完全使用Ivy，ngcc是为兼容旧版View Engine的工具，删除package.json中postinstall字段的ngcc命令，避免执行错误。

4. 统一Angular核心版本 #

当前Angular各包版本存在小差异（如17.3.8和17.3.12），统一为同一版本可减少构建冲突，建议全部更新为17.3.12。

5. 检查TypeScript版本兼容性 #

Angular 17要求TypeScript 5.2+，当前配置的5.3.3符合要求，无需调整；若后续修改Angular版本，需同步对应TS版本。

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