Angular5下kendo-chart-tooltip提示background.isDark不是函数如何解决？

• 该报错为Kendo UI for Angular依赖版本不兼容导致：background.isDark是@progress/kendo-drawing包v1.5.10及以上版本新增的API，若你使用的@progress/kendo-angular-charts版本高于匹配的drawing包版本，调用不存在的API就会抛出该错误
• Angular 5对应的Kendo UI官方适配最高版本为2018年Q3版本，若你单独升级了部分Kendo包未同步全量依赖，也会触发该兼容性问题

方案一：全量锁定兼容版本（推荐） #

1. 将package.json中所有Kendo相关依赖替换为Angular 5适配版本，参考配置如下：

{
  "dependencies": {
    "@angular/common": "^5.2.11",
    "@angular/core": "^5.2.11",
    "@progress/kendo-angular-charts": "3.8.0",
    "@progress/kendo-angular-common": "1.2.2",
    "@progress/kendo-angular-tooltip": "1.2.1",
    "@progress/kendo-drawing": "1.5.12",
    "@progress/kendo-theme-default": "2.53.1",
    "@telerik/kendo-intl": "1.4.2"
  }
}

2. 清除旧依赖并重新安装：

• 删除项目根目录下的node_modules文件夹、package-lock.json（npm）或yarn.lock（yarn）文件
• 执行npm cache clean --force清除npm缓存
• 执行npm install重新安装所有依赖

3. 确认模块导入配置正确，在对应功能模块中导入必要的Kendo模块：

// claim-summary.module.ts
import { NgModule } from '@angular/core';
import { ChartsModule } from '@progress/kendo-angular-charts';
import { TooltipModule } from '@progress/kendo-angular-tooltip';

@NgModule({
  imports: [
    ChartsModule,
    TooltipModule
    // 其余项目依赖模块
  ]
})
export class ClaimSummaryModule {}

方案二：临时兼容补丁（适用于无法调整依赖版本的场景） #

在项目的polyfills.ts文件末尾添加以下代码，给Background类补上缺失的isDark方法兜底：

import { Background } from '@progress/kendo-drawing';
if (Background && !Background.prototype.isDark) {
  Background.prototype.isDark = function() {
    // 可根据你的项目主题需要调整返回值，true为深色背景，false为浅色背景
    return false;
  };
}

问题排查补充 #

如果操作后仍有报错，执行npm ls @progress/kendo-drawing检查是否存在多版本的kendo-drawing包：

• 若使用yarn，可在package.json中新增resolutions字段锁定版本：

  "resolutions": {
    "@progress/kendo-drawing": "1.5.12"
  }
  

• 若使用npm，安装npm-force-resolutions工具后再执行安装即可强制锁定版本。

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