Question

我有一个使用素词ChartsModule的组件，该组件引用Chart.js。我已安装Chart.js，并将其导入到我的angular.json文件中。

"scripts": [
  "node_modules/chart.js/dist/Chart.bundle.min.js"
]

该应用程序均可正常运行并显示图表。但是，我的组件测试因以下错误而中断：ReferenceError: Chart is not defined

我看过几篇文章建议将Chart.js导入到组件测试中，如下所示：

import { Chart } from 'chart.js';

这不起作用。我的问题是将Chart.js等第三方JS库导入Angular 6 Karma测试的正确方法是什么

编辑我的组件

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-my-chart',
  templateUrl: './my-chart.component.html',
  styleUrls: ['./my-chartcomponent.scss']
})
export class MyChartComponent implements OnInit {

  public data: any;

  constructor() { }

  ngOnInit() {
    this.data = {
      labels: ['Low', 'Medium', 'High'],
      datasets: [
        {
          data: [300, 50, 10],
          backgroundColor: [
              '#43a047',
              '#fb8c00',
              '#e53935'
          ],
          hoverBackgroundColor: [
              '#66bb6a',
              '#ffa726',
              '#ef5350'
          ]
        }]
      };
  }
}

Answer 1

仍然在旧的angular-cli.json模式下思考。在新的angular.json中，有一个测试部分，您还必须在其中添加第三方脚本。

    "test": {
      "builder": "@angular-devkit/build-angular:karma",
      "options": {
        "main": "src/test.ts",
        "polyfills": "src/polyfills.ts",
        "tsConfig": "src/tsconfig.spec.json",
        "karmaConfig": "src/karma.conf.js",
        "styles": [
          "styles.scss"
        ],
        "scripts": [
          "node_modules/chart.js/dist/Chart.bundle.min.js"
        ],
        "assets": [
          "src/favicon.ico"
        ]
      }
    },

Angular 6导入在Karma测试中使用的第三方JS文件的正确方法

1 个答案: