升级Angular 17遭遇TS2403错误，请求解决方案

背景 #

我按照官方步骤将Angular从16版本升级到17，同时更新了需适配Angular 17的依赖：

• @angular-eslint/schematics 从16升级到17
• @ngx-translate/core 从14升级到15
• angular-oauth2-oidc 从14升级到17

当前配置 #

package.json 依赖 #

"dependencies": {
    "@angular/animations": "~17.3.6",
    "@angular/common": "~17.3.6",
    "@angular/compiler": "~17.3.6",
    "@angular/core": "~17.3.6",
    "@angular/forms": "~17.3.6",
    "@angular/localize": "~17.3.6",
    "@angular/platform-browser": "~17.3.6",
    "@angular/platform-browser-dynamic": "~17.3.6",
    "@angular/platform-server": "~17.3.6",
    "@angular/router": "~17.3.6",
    "@fortawesome/angular-fontawesome": "^0.11.1",
    "@fortawesome/fontawesome-common-types": "^6.2.0",
    "@fortawesome/fontawesome-svg-core": "^6.2.0",
    "@ngx-translate/core": "^15.0.0",
    "@ngx-translate/http-loader": "^8.0.0",
    "@progress/kendo-angular-buttons": "^8.0.0",
    "@progress/kendo-angular-common": "^3.0.0",
    "@progress/kendo-angular-dateinputs": "^7.0.1",
    "@progress/kendo-angular-dialog": "^7.1.2",
    "@progress/kendo-angular-dropdowns": "^7.0.2",
    "@progress/kendo-angular-excel-export": "^5.0.1",
    "@progress/kendo-angular-grid": "^7.2.1",
    "@progress/kendo-angular-icons": "^2.0.1",
    "@progress/kendo-angular-indicators": "^2.0.0",
    "@progress/kendo-angular-inputs": "^9.0.3",
    "@progress/kendo-angular-intl": "^4.1.0",
    "@progress/kendo-angular-l10n": "^4.0.0",
    "@progress/kendo-angular-label": "^4.0.0",
    "@progress/kendo-angular-layout": "^7.1.0",
    "@progress/kendo-angular-listview": "^4.0.4",
    "@progress/kendo-angular-menu": "^4.0.0",
    "@progress/kendo-angular-navigation": "^2.0.0",
    "@progress/kendo-angular-notification": "^4.0.0",
    "@progress/kendo-angular-pdf-export": "^4.0.0",
    "@progress/kendo-angular-popup": "^5.0.0",
    "@progress/kendo-angular-progressbar": "^3.1.1",
    "@progress/kendo-angular-ripple": "^4.0.0",
    "@progress/kendo-angular-tooltip": "^4.0.1",
    "@progress/kendo-angular-treeview": "^7.1.0",
    "@progress/kendo-data-query": "^1.6.0",
    "@progress/kendo-drawing": "^1.16.3",
    "@progress/kendo-licensing": "^1.2.2",
    "@progress/kendo-svg-icons": "^0.1.2",
    "@progress/kendo-theme-default": "^5.0.0",
    "@types/lodash": "^4.14.186",
    "angular-oauth2-oidc": "^17.0.2",
    "bootstrap": "^5.1.3",
    "cldr-core": "^42.0.0",
    "cldr-dates-full": "^42.0.0",
    "cldr-numbers-full": "^42.0.0",
    "jquery": "^3.6.0",
    "kendo-ui-license": "^1.0.1",
    "locale-codes": "^1.3.1",
    "oidc-client": "^1.11.5",
    "popper.js": "^1.16.0",
    "run-script-os": "^1.1.6",
    "rxjs": "~7.5.5",
    "zone.js": "~0.14.5"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~17.3.6",
    "@angular-eslint/builder": "17.3.0",
    "@angular-eslint/eslint-plugin": "17.3.0",
    "@angular-eslint/eslint-plugin-template": "17.3.0",
    "@angular-eslint/schematics": "17.3.0",
    "@angular-eslint/template-parser": "17.3.0",
    "@angular/cli": "~17.3.6",
    "@angular/compiler-cli": "~17.3.6",
    "@types/jasmine": "~4.0.3",
    "@types/jasminewd2": "~2.0.10",
    "@types/jquery": "^3.5.14",
    "@types/node": "^17.0.45",
    "@typescript-eslint/eslint-plugin": "^7.2.0",
    "@typescript-eslint/parser": "^7.2.0",
    "eslint": "^8.57.0",
    "jasmine-core": "~4.1.0",
    "karma": "~6.3.19",
    "karma-chrome-launcher": "~3.1.1",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.0.0",
    "karma-jasmine-html-reporter": "^1.7.0",
    "ngx-translate-testing": "^6.1.0",
    "tslib": "^2.4.0",
    "typescript": "^5.4.5"
  }

Angular CLI 信息 #

Angular CLI: 17.3.6
Node: 18.20.2
Package Manager: npm 10.5.0
OS: win32 x64

Angular: 17.3.6
... animations, cli, common, compiler, compiler-cli, core, forms
... localize, platform-browser, platform-browser-dynamic
... platform-server, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1703.6
@angular-devkit/build-angular   17.3.6
@angular-devkit/core            17.3.6
@angular-devkit/schematics      17.3.6
@schematics/angular             17.3.6
rxjs                            7.5.7
typescript                      5.4.5
zone.js                         0.14.5

遇到的问题 #

1. 项目使用TypeScript 5.4.5，但全局安装版本为5.1.6，不确定是否因此触发TS2403错误（类型重复声明）。
2. 尝试升级全局TypeScript到5.4.5时，出现权限错误：

npm ERR! code EPERM
npm ERR! syscall mkdir
npm ERR! path C:\Program Files\nodejs\node_modules\.corepack-yRBjKBW1
npm ERR! errno -4048
npm ERR! Error: EPERM: operation not permitted, mkdir 'C:\Program Files\nodejs\node_modules\.corepack-yRBjKBW1'
npm ERR!  [Error: EPERM: operation not permitted, mkdir 'C:\Program Files\nodejs\node_modules\.corepack-yRBjKBW1'] {
npm ERR!   errno: -4048,
npm ERR!   code: 'EPERM',
npm ERR!   syscall: 'mkdir',
npm ERR!   path: 'C:\\Program Files\\nodejs\\node_modules\\.corepack-yRBjKBW1'
npm ERR! }
npm ERR!
npm ERR! The operation was rejected by your operating system.
npm ERR! It's possible that the file was already in use (by a text editor or antivirus),
npm ERR! or that you lack permissions to access it.
npm ERR! 
npm ERR! If you believe this might be a permissions issue, please double-check the
npm ERR! permissions of the file and its containing directories, or try running
npm ERR! the command again as root/Administrator.

解决方案 #

一、先解决TS2403错误（无需急于升级全局TS） #

TS2403多由项目内部类型重复声明导致，和全局TS版本关联不大，优先排查以下点：

• 清理项目缓存：执行npx tsc --clean，删除根目录的dist文件夹和tsconfig.tsbuildinfo文件，再运行npm run build。
• 排查依赖冲突：用npm ls typescript查看是否有依赖偷偷引入低版本TS，若存在，在package.json中添加resolutions字段强制统一版本：

  "resolutions": {
    "typescript": "^5.4.5"
  }
  

  之后执行npm install。
• 检查TS配置：确保tsconfig.json中compilerOptions.skipLibCheck设为false，定位到重复声明的模块后，要么更新对应依赖，要么在exclude字段中排除冲突文件。
• 升级Kendo UI依赖：当前使用的Kendo Angular包版本（如@progress/kendo-angular-grid 7.x）可能未完全适配Angular 17，建议升级到支持Angular 17的最新版本。

二、解决全局TS升级的权限问题 #

若确实需要升级全局TS，可尝试以下方法：

• 管理员身份运行终端：右键CMD或PowerShell，选择“以管理员身份运行”，再执行npm install -g typescript@5.4.5。
• 关闭占用进程：检查是否有VS Code、杀毒软件等程序占用C:\Program Files\nodejs\node_modules目录，关闭后重试。
• 使用nvm管理Node版本：安装nvm后，通过nvm安装对应Node版本，全局TS会安装在nvm专属目录，避开系统权限限制。
• 修改npm全局路径：
  1. 执行npm config set prefix "C:\Users\你的用户名\AppData\Roaming\npm"
  2. 执行npm config set cache "C:\Users\你的用户名\AppData\Roaming\npm-cache"
  3. 重新运行npm install -g typescript@5.4.5

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