Question

我有一个使用Angular CLI的网络应用程序。并且有一个名为饼图组件的组件。

在pie-chart-component.ts中，我正在导入Chart.js

import Chart from 'chart.js';

它可以在UI中正常工作，但是当我运行npm test时，它无法识别HTML中的标记，并且无法通过Angular CLI附带的基本业力测试，该测试基本上测试是否创建了此组件或不。

Karma中的错误：

Failed: Template parse errors:
Can't bind to 'datasets' since it isn't a known property of 'canvas'. ("
  <div style="display: block">

我的一部分内容：

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [PieChartPanelComponent]
    })
    .compileComponents();
  }));

我认为我需要将图表库添加到提供者或导入中。但是当我尝试这样做时，编译器会说图表是一种类型，我正在尝试将其用作值。

使Karma测试能够读取外部库并识别标签是什么的正确方法是什么？

Answer 1

如果您使用了ChartsModule，那么还需要在spec.ts文件中导入它。如下：

import {ChartsModule} from 'ng2-charts';

然后

beforeEach(async(() => {
  TestBed.configureTestingModule({
    imports:[ChartsModule],
    declarations: [PieChartPanelComponent]
  })
  .compileComponents();
}));

Karma Test for Angular 2/4如何包含外部库

1 个答案: