将 Chartist 插件添加到 Angular 5

ech*_*lik 1 typescript chartist.js angular

我正在尝试在 Angular 5 中构建一个项目,该项目具有图表专家 @types 和图表插件的 js 文件。

这些文件在 angular 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';
Run Code Online (Sandbox Code Playgroud)

这适用于 Angular 4。

编译成功的场景:

我已经用数组angular-cli.jsonscripts键下添加了上述文件。

  "scripts": [
    "../chartist/chartist.legend.js",
    "../chartist/chartist.pointlabels.js",
    "../chartist/chartist.fill-donut.js",
    "../chartist/chartist-plugin-tooltip.js"
  ]
Run Code Online (Sandbox Code Playgroud)

我已经尝试过本指南,这允许编译成功,但我在 JS 中遇到Chartist.plugins未定义的错误。

我试过在我的typings.d.ts

interface Chartist {
  plugins? : any
}
Run Code Online (Sandbox Code Playgroud)

和这个

declare module 'ChartistLegend';
declare module 'ChartistPoints';
declare module 'ChartistFDoughnut';
declare module 'ChartistTooltip';
Run Code Online (Sandbox Code Playgroud)

我单独使用过两者,但没有一起使用。

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
Run Code Online (Sandbox Code Playgroud)

问候

PS:抱歉有错别字,我的手都冻僵了。

编辑 1:添加了角度版本

小智 6

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

import * as Chartist from 'chartist';
import 'chartist-plugin-tooltips';
Run Code Online (Sandbox Code Playgroud)

解决了这个问题。