Angular项目SIT部署后chartjs-plugin-labels报找不到Chart对象错误

算力阿峰

2026-8-29

问题根因

报错本质是chartjs-plugin-labels@1.1.0本身的实现问题：这个版本的插件没有做ES Module适配，加载时会直接读取全局window.Chart对象完成注册。
Angular本地ng serve跑的是开发环境构建，不会开启严格的摇树优化和代码压缩，Chart.js的实例会意外挂载到全局作用域，所以插件能正常读取；执行sit/prod这类环境构建时，webpack会开启tree shaking、作用域提升、代码压缩，默认不会把Chart.js暴露到全局，插件加载时拿不到对象就直接抛出"Can not find Chart object"错误。

解决步骤

调整依赖引入顺序，手动挂载全局Chart对象
找到你当前引入图表模块的文件（全局使用就改src/main.ts，单模块使用就改对应模块的ts文件），把引入代码改成下面的顺序，必须保证先挂载全局Chart，再加载labels插件：
```
import * as Chart from 'chart.js';
// 手动挂载到全局供插件读取
(window as any).Chart = Chart;

// 插件要放在全局挂载之后引入
import 'chartjs-plugin-labels';
import { ChartModule } from 'angular2-chartjs';

@NgModule({
  imports: [ChartModule],
  // 其他原有配置不变
})
```
你之前没有显式引入chart.js本体，完全靠angular2-chartjs的传递依赖拉取包，生产构建时传递依赖的作用域更容易被打包器裁剪，显式引入可以规避这个问题。
补充构建配置避免CommonJS依赖被异常处理
打开项目根目录的angular.json，找到architect.build.configurations.sit配置段，添加allowedCommonJsDependencies项，避免Angular对这几个CommonJS规范的包做异常ESM转换：
```
"sit": {
  // 原有baseHref、fileReplacements、optimization等配置全部保留
  "allowedCommonJsDependencies": [
    "chart.js",
    "chartjs-plugin-labels"
  ]
}
```
本地验证构建产物
改完配置重新执行npm run sit，打包完成后本地用静态服务（比如npx http-server dist/你的项目名）跑构建后的产物，确认控制台无报错再上传到Apache服务器，排除服务器侧的资源缓存、加载顺序问题。

替代方案

如果调整配置后还是有兼容问题，建议直接替换成Chart.js官方维护的chartjs-plugin-datalabels插件，这个插件原生支持ESM引入，不需要依赖全局Chart对象，和Angular的webpack打包逻辑适配更好，不会出现开发环境正常、生产构建报错的问题，功能也比老旧的chartjs-plugin-labels更完善。

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