Angular14集成ngx-charts/ngx-echarts报错：__extends不是函数

问题根源 #

这个报错本质是tslib 版本不兼容或加载异常。__extends 是 tslib 提供的 TypeScript 辅助函数，Angular 14 对 tslib 版本有明确要求（需 ≥2.3.0），如果项目本身的 tslib 版本过低，或者图表库依赖的 tslib 版本和项目冲突，就会触发这个错误。

一步步解决 #

1. 检查并升级 tslib #

打开项目的 package.json，查看 tslib 的版本号。如果低于 2.3.0，直接执行：

npm install tslib@^2.3.0 --save

使用 yarn 的话：

yarn add tslib@^2.3.0

2. 清理依赖缓存，重装所有包 #

缓存或锁文件可能导致依赖版本混乱，执行以下命令：

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

3. 调整 ngx-echarts 的导入方式 #

你当前用的是动态导入 echarts: () => import('echarts')，可以试试静态导入的写法，避免动态加载时的解析问题：

import * as echarts from 'echarts';

@NgModule({
  imports: [
    // ...其他模块
    NgxEchartsModule.forRoot({
      echarts: () => Promise.resolve(echarts)
    })
  ]
})
export class HomeModule { }

4. 排查依赖树中的 tslib 冲突 #

如果上面的步骤没用，用命令查看项目中所有依赖的 tslib 版本：

npm ls tslib

如果发现有其他包强制引入了低版本 tslib，在 package.json 中添加 resolutions 字段强制统一版本：

"resolutions": {
  "tslib": "^2.3.0"
}

然后重新执行 npm install。

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