Angular 16升级至17后启动报错，求助JQueryStatic与Kendo模块问题

问题背景 #

将项目从Angular 16升级到17后，执行npm run start出现以下两个编译错误：

• TS2304: Cannot find name 'JQueryStatic'，对应代码行：var jQuery: JQueryStatic;
• /node_modules/@progress/kendo-ui/index.d.ts' is not a module

同时询问是否可以不修复该问题直接使用node模块，当前项目的package.json内容如下：

{
  "dependencies": {
    "@angular/animations": "^17.3.4",
    "@angular/cdk": "^17.3.4",
    "@angular/common": "^17.3.4",
    "@angular/compiler": "^17.3.4",
    "@angular/core": "^17.3.4",
    "@angular/forms": "^17.3.4",
    "@angular/localize": "^17.3.4",
    "@angular/platform-browser": "^17.3.4",
    "@angular/platform-browser-dynamic": "^17.3.4",
    "@angular/router": "^17.3.4",
    "@fortawesome/fontawesome-free": "^5.12.1",
    "@mingleats/ng-extract-i18n-merge": "1.0.2-SNAPSHOT",
    "@ngx-loading-bar/core": "^6.0.2",
    "@ngx-loading-bar/http-client": "^6.0.2",
    "@ngx-translate/core": "^15.0.0",
    "@ngx-translate/http-loader": "^8.0.0",
    "@progress/kendo-angular-buttons": "^15.5.0",
    "@progress/kendo-angular-charts": "^15.5.0",
    "@progress/kendo-angular-common": "^15.5.0",
    "@progress/kendo-angular-dateinputs": "^15.5.0",
    "@progress/kendo-angular-dialog": "^15.5.0",
    "@progress/kendo-angular-dropdowns": "^15.5.0",
    "@progress/kendo-angular-editor": "^15.5.0",
    "@progress/kendo-angular-excel-export": "^15.5.0",
    "@progress/kendo-angular-grid": "^15.5.0",
    "@progress/kendo-angular-inputs": "^15.5.0",
    "@progress/kendo-angular-intl": "^15.5.0",
    "@progress/kendo-angular-l10n": "^15.5.0",
    "@progress/kendo-angular-label": "^15.5.0",
    "@progress/kendo-angular-layout": "^15.5.0",
    "@progress/kendo-angular-listview": "^15.5.0",
    "@progress/kendo-angular-menu": "^15.5.0",
    "@progress/kendo-angular-messages": "^1.56.0",
    "@progress/kendo-angular-notification": "^15.5.0",
    "@progress/kendo-angular-pager": "^15.5.0",
    "@progress/kendo-angular-pdf-export": "^15.5.0",
    "@progress/kendo-angular-popup": "^15.5.0",
    "@progress/kendo-angular-progressbar": "^15.5.0",
    "@progress/kendo-angular-toolbar": "^15.5.0",
    "@progress/kendo-angular-tooltip": "^15.5.0",
    "@progress/kendo-angular-treelist": "^15.5.0",
    "@progress/kendo-angular-treeview": "^15.5.0",
    "@progress/kendo-angular-upload": "^15.5.0",
    "@progress/kendo-data-query": "^1.5.5",
    "@progress/kendo-drawing": "^1.16.3",
    "@progress/kendo-licensing": "^1.3.3",
    "@progress/kendo-theme-default": "^6.7.0",
    "@progress/kendo-ui": "^2024.1.319",
    "@telerik/kendo-draggable": "^2.2.0",
    "@types/file-saver": "^2.0.1",
    "@types/lodash": "^4.14.157",
    "bulma": "^0.8.0",
    "file-saver": "^2.0.2",
    "hammerjs": "^2.0.0",
    "jquery": "^3.7.1",
    "localforage": "^1.7.3",
    "lodash-es": "^4.17.15",
    "moment": "^2.29.4",
    "ngx-moment": "^6.0.2",
    "ngx-spinner": "^16.0.2",
    "rxjs": "^7.5.5",
    "tslib": "^2.4.0",
    "zone.js": "~0.14.4"
  },
  "devDependencies": {
    "@angular-builders/custom-webpack": "^17.0.2",
    "@angular-devkit/build-angular": "^17.0.0",
    "@angular-eslint/builder": "17.3.0",
    "@angular-eslint/eslint-plugin": "17.3.0",
    "@angular-eslint/eslint-plugin-template": "17.3.0",
    "@angular-eslint/template-parser": "17.3.0",
    "@angular/cli": "^17.3.4",
    "@angular/compiler-cli": "^17.3.4",
    "@angular/language-service": "^17.3.4",
    "@biesbjerg/ngx-translate-extract": "^5.0.0",
    "@biesbjerg/ngx-translate-extract-marker": "1.0.0",
    "@fullhuman/postcss-purgecss": "^4.0.3",
    "@mingleats/ng-extract-i18n-merge": "1.0.2-SNAPSHOT",
    "@types/jasmine": "~3.6.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/jquery": "^3.5.29",
    "@types/node": "^14.0.14",
    "@typescript-eslint/eslint-plugin": "^5.62.0",
    "@typescript-eslint/eslint-plugin-tslint": "^5.62.0",
    "@typescript-eslint/parser": "^5.62.0",
    "@typescript-eslint/typescript-estree": "^5.62.0",
    "autoprefixer": "^10.2.5",
    "codelyzer": "^6.0.2",
    "eslint": "^8.51.0",
    "eslint-config-prettier": "^8.10.0",
    "eslint-plugin-html": "^7.1.0",
    "eslint-plugin-import": "^2.28.1",
    "eslint-plugin-jsdoc": "^39.9.1",
    "eslint-plugin-prefer-arrow": "^1.2.1",
    "eslint-plugin-prettier": "^3.4.0",
    "husky": "^7.0.0",
    "jasmine-core": "~4.2.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~6.3.2",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "^2.0.0",
    "lint-staged": "^11.0.0",
    "moment-locales-webpack-plugin": "^1.2.0",
    "ng-packagr": "^17.3.0",
    "postcss-import": "^16.1.0",
    "postcss-loader": "^8.1.1",
    "postcss-scss": "^4.0.9",
    "prettier": "2.3.2",
    "protractor": "~7.0.0",
    "resolve-url-loader": "^5.0.0",
    "tailwindcss": "^2.0.4",
    "ts-node": "~8.10.1",
    "tslint": "~6.1.0",
    "typescript": "~5.4.5",
    "webpack": "^5.41.1"
  }
}

错误修复方案 #

1. 解决JQueryStatic类型找不到的问题 #

• 你的项目已安装@types/jquery，无需重复安装；若未安装，执行：

  npm install @types/jquery --save-dev
  

• 在tsconfig.json的compilerOptions.types数组中添加jquery，确保TypeScript识别全局类型：

  {
    "compilerOptions": {
      // 其他配置...
      "types": ["jquery"]
    }
  }
  

• 若全局声明仍不生效，可在使用JQueryStatic的文件顶部手动导入类型：

  import type { JQueryStatic } from 'jquery';
  

2. 解决@progress/kendo-ui不是模块的问题 #

当前Kendo Angular组件版本（15.5.0）与Angular 17不兼容，旧版本的类型定义在TypeScript 5.4环境下会出现模块识别错误，需升级到兼容Angular 17的Kendo版本：

• 升级所有Kendo Angular包到v17.x版本，执行：

  npm install @progress/kendo-angular-buttons@^17.0.0 @progress/kendo-angular-charts@^17.0.0 @progress/kendo-angular-common@^17.0.0 @progress/kendo-angular-dateinputs@^17.0.0 @progress/kendo-angular-dialog@^17.0.0 @progress/kendo-angular-dropdowns@^17.0.0 @progress/kendo-angular-editor@^17.0.0 @progress/kendo-angular-excel-export@^17.0.0 @progress/kendo-angular-grid@^17.0.0 @progress/kendo-angular-inputs@^17.0.0 @progress/kendo-angular-intl@^17.0.0 @progress/kendo-angular-l10n@^17.0.0 @progress/kendo-angular-label@^17.0.0 @progress/kendo-angular-layout@^17.0.0 @progress/kendo-angular-listview@^17.0.0 @progress/kendo-angular-menu@^17.0.0 @progress/kendo-angular-messages@^17.0.0 @progress/kendo-angular-notification@^17.0.0 @progress/kendo-angular-pager@^17.0.0 @progress/kendo-angular-pdf-export@^17.0.0 @progress/kendo-angular-popup@^17.0.0 @progress/kendo-angular-progressbar@^17.0.0 @progress/kendo-angular-toolbar@^17.0.0 @progress/kendo-angular-tooltip@^17.0.0 @progress/kendo-angular-treelist@^17.0.0 @progress/kendo-angular-treeview@^17.0.0 @progress/kendo-angular-upload@^17.0.0 @progress/kendo-data-query@^2.0.0 @progress/kendo-drawing@^1.20.0 @progress/kendo-ui@^2024.2.514 --save
  

• 同步升级主题包到兼容版本：

  npm install @progress/kendo-theme-default@^7.0.0 --save
  

关于是否可以不修复直接使用node模块 #

不行。这两个错误属于TypeScript类型检查失败，Angular 17的构建流程依赖严格的类型校验，不修复的话项目无法完成编译，更无法正常运行任何依赖的node模块。必须先解决类型错误，才能继续使用项目依赖。

内容的提问来源于stack exchange，提问作者Hyeon Geun Gwak