在Angular中添加Jqwidgets组件时遇TypeScript编译错误求助

云原生阿岚

2026-5-21

解决Angular项目中jqwidgets组件未被TypeScript编译的错误

这个错误的核心原因是TypeScript编译器没有将jqwidgets提供的Angular封装文件纳入编译范围，下面是几个针对性的解决步骤：

1. 调整根目录`tsconfig.json`的编译包含规则

打开项目根目录下的tsconfig.json，找到include数组，添加jqwidgets的TypeScript文件路径：

{
  "compilerOptions": {
    // 保留你原有的编译配置
  },
  "include": [
    "src/**/*.ts",
    "node_modules/jqwidgets-scripts/jqwidgets-ts/**/*.ts"
  ],
  "exclude": [
    "node_modules"
    // 注：TypeScript会优先处理include中的路径，所以即使exclude包含node_modules，也不会影响我们指定的jqwidgets文件
  ]
}

这样编译器就会明确把jqwidgets的所有Angular封装ts文件纳入编译流程。

2. 补充`tsconfig.app.json`的配置（Angular CLI项目专属）

如果你的项目是Angular CLI生成的，通常在src目录下还有tsconfig.app.json文件，这里也需要同步添加包含规则：

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    // 保留项目特定的编译选项
  },
  "files": [
    "main.ts",
    "polyfills.ts"
  ],
  "include": [
    "src/**/*.d.ts",
    "../node_modules/jqwidgets-scripts/jqwidgets-ts/**/*.ts"
  ]
}

Angular构建时会优先使用这个文件的配置，所以必须确保这里也覆盖到jqwidgets的文件路径。