Question

我正在尝试在Angular 5中构建一个项目，该项目包含图表@itepes和图表插件的js文件。

文件在角度4中编译良好，但无法在Angular 5中编译或加载。我对我应该做的事感到困惑。

编译失败且错误为ERROR in error TS5055: Cannot write file '/chartist/chartist-plugin-tooltip.js' because it would overwrite input file

的情况

在这种情况下，我直接导入组件中的文件，如下所示：

import * as CLegend from "../../../chartist/chartist.legend";
import * as CPoints from "../../../chartist/chartist.pointlabels";
import * as CFDoughnut from '../../../chartist/chartist.fill-donut';
import * as CTooltip from '../../../chartist/chartist-plugin-tooltip';

这适用于Angular 4。

编译成功的场景：

我已在angular-cli.json下的scripts键下添加了上述文件。

  "scripts": [
    "../chartist/chartist.legend.js",
    "../chartist/chartist.pointlabels.js",
    "../chartist/chartist.fill-donut.js",
    "../chartist/chartist-plugin-tooltip.js"
  ]

我已经尝试this guide，这允许编译成功但我在JS中遇到错误Chartist.plugins未定义。

我尝试在typings.d.ts中添加此内容：

interface Chartist {
  plugins? : any
}

和这个

declare module 'ChartistLegend';
declare module 'ChartistPoints';
declare module 'ChartistFDoughnut';
declare module 'ChartistTooltip';

我已经单独使用但不能一起使用。

ng -v输出：

    _                      _                 ____ _     ___
   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
            |___/

Angular CLI: 1.6.3
Node: 6.11.0
OS: win32 x64
Angular: 5.1.3
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cdk: 5.0.3
@angular/cli: 1.6.3
@angular/material-moment-adapter: 5.0.3
@angular/material: 5.0.3
@angular-devkit/build-optimizer: 0.0.36
@angular-devkit/core: 0.0.22
@angular-devkit/schematics: 0.0.42
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.3
@schematics/angular: 0.1.11
@schematics/schematics: 0.0.11
typescript: 2.4.2
webpack: 3.10.0

此致

PS：对不起任何错别字，我的手都冻结了。

编辑1：添加了角度版本

Answer 1

这需要一些试验和错误，因为我找不到解决插件未定义问题的任何资源。在我的情况下添加

import * as Chartist from 'chartist';
import 'chartist-plugin-tooltips';

解决了这个问题。

将Chartist插件添加到Angular 5

1 个答案: