Angular 5集成Chartist插件编译及加载问题求助

我来帮你梳理下这个问题的根源和解决办法——Angular 5相比Angular 4在TypeScript编译配置和模块处理上更严格，这就是你遇到两种报错的核心原因。

一、解决编译报错：TS5055 Cannot write file... #

直接导入JS文件触发这个错误，是因为TypeScript的allowJs选项默认开启后，编译器会尝试把这些JS文件编译输出到outDir，但又因为它们是源文件（输入文件），所以不允许覆盖。你可以通过以下两种方式解决：

方式1：调整tsconfig.json配置 #

在tsconfig.json中添加exclude数组，把这些Chartist插件JS文件排除在编译范围外：

{
  "compilerOptions": {
    // 你的其他配置...
  },
  "exclude": [
    // 其他排除项...
    "../chartist/chartist.legend.js",
    "../chartist/chartist.pointlabels.js",
    "../chartist/chartist.fill-donut.js",
    "../chartist/chartist-plugin-tooltip.js"
  ]
}

方式2：改用类型声明导入 #

不要直接导入JS文件，而是通过类型声明间接引用，同时保留在angular-cli.json的scripts里加载JS文件的方式（后面会结合运行时问题一起说）。

二、解决运行时报错：Chartist.plugins is undefined #

这个问题是因为Chartist插件需要挂载到全局的Chartist对象上，但加载顺序或者全局变量的声明缺失导致插件无法找到Chartist对象。按以下步骤处理：

1. 确保加载顺序正确 #

在angular-cli.json的scripts数组中，必须先加载Chartist核心库，再加载插件，比如：

"scripts": [
  // 先加Chartist核心JS
  "../node_modules/chartist/dist/chartist.min.js",
  // 再加载你的插件
  "../chartist/chartist.legend.js",
  "../chartist/chartist.pointlabels.js",
  "../chartist/chartist.fill-donut.js",
  "../chartist/chartist-plugin-tooltip.js"
]

2. 正确声明全局Chartist类型 #

在typings.d.ts中补充完整的全局类型声明，让TypeScript识别Chartist及其plugins属性：

declare var Chartist: {
  // 保留Chartist原有的类型（如果有@types/chartist的话会自动合并）
  plugins: {
    tooltip?: any;
    legend?: any;
    // 按需添加你用到的插件类型
  };
  // 其他Chartist核心方法/类型...
};

// 如果需要通过模块导入的方式使用，也可以声明模块：
declare module 'chartist-plugin-tooltip' {
  const plugin: any;
  export default plugin;
}
declare module 'chartist.legend' {
  const plugin: any;
  export default plugin;
}
// 其他插件同理

3. 在组件中正确使用插件 #

如果是通过scripts加载的全局插件，在组件中不需要导入JS文件，直接使用全局的Chartist.plugins即可：

import { Component, OnInit } from '@angular/core';
// 只需要导入Chartist的类型（如果安装了@types/chartist）
import * as Chartist from 'chartist';

@Component({
  selector: 'app-chart',
  templateUrl: './chart.component.html'
})
export class ChartComponent implements OnInit {
  ngOnInit() {
    // 使用tooltip插件示例
    new Chartist.Line('#chart', data, options, {
      plugins: [
        Chartist.plugins.tooltip()
      ]
    });
  }
}

三、验证环境配置 #

最后确认你的依赖版本兼容性：

• TypeScript 2.4.2和Angular 5.1.3是兼容的，但可以考虑升级到2.6.x（Angular 5推荐的TS版本范围是2.4.2~2.7.x）
• 确保@types/chartist的版本和你使用的Chartist核心库版本匹配

按照这个流程调整后，应该就能同时解决编译和运行时的问题了。

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