NG2-карты не работает с angularjs2 WebPack

Question

Я пытаюсь использовать NG2-чарты с angularjs 2:

в app.ts:

import { Component } from '@angular/core'; 
import { ApiService } from './shared'; 
import { ChartsModule } from 'ng2-charts/ng2-charts'; 

мой файл HTML:

 <canvas baseChart 
     [datasets]="barChartData" 
     [labels]="barChartLabels" 
     [options]="barChartOptions" 
     [legend]="barChartLegend" 
     [chartType]="barChartType" 
     (chartHover)="chartHovered($event)" 
     (chartClick)="chartClicked($event)"> 
     </canvas> 

в webpack.config.js псевдоним: { 'ng2-charts': 'node_modules/ng2-charts' }

ошибка в браузере или когда выполнить тест НПМ:

Can't bind to 'datasets' since it isn't a known property of 'canvas'. (" 

<canvas baseChart 
      [ERROR ->][datasets]="barChartData" 
      [labels]="barChartLabels" 
      [options]="barChartOption"): AppComponent@10:12 
Can't bind to 'labels' since it isn't a known property of 'canvas'. (" 
<canvas baseChart 
      [datasets]="barChartData" 
      [ERROR ->][labels]="barChartLabels" 
      [options]="barChartOptions" 
      [legend]="barChartLegen"): AppComponent@11:12 
Can't bind to 'options' since it isn't a known property of 'canvas'. (" 
      [datasets]="barChartData" 
      [labels]="barChartLabels" 
      [ERROR ->][options]="barChartOptions" 
      [legend]="barChartLegend" 
      [chartType]="barChartTy"): AppComponent@12:12 
Can't bind to 'legend' since it isn't a known property of 'canvas'. (" 
      [labels]="barChartLabels" 
      [options]="barChartOptions" 
      [ERROR ->][legend]="barChartLegend" 
      [chartType]="barChartType" 
      (chartHover)="chartHover"): AppComponent@13:12 
Can't bind to 'chartType' since it isn't a known property of 'canvas'. (" 
      [options]="barChartOptions" 
      [legend]="barChartLegend" 
      [ERROR ->][chartType]="barChartType" 
      (chartHover)="chartHovered($event)" 
      (chartClick)=""): AppComponent@14:12 in karma-shim.js (line 12563) 

Answer 1

Сообщение об ошибке свидетельствует о том, что Angular не признает baseChart как директива, так что, когда вы пытаетесь привязать к [datasets], он ищет эту собственность на canvas вместо baseChart.

Если я прав, исправление должно правильно импортировать ChartsModule в любой модуль, который в этом нуждается. У не импортировать его непосредственно в AppComponent

AppModule

import {NgModule}  from '@angular/core'; 
import {BrowserModule} from '@angular/platform-browser'; // or CommonModule 
import {ChartsModule} from 'ng2-charts/ng2-charts'; 

// https://angular.io/docs/ts/latest/guide/ngmodule.html#!#ngmodule-properties 
@NgModule({ 
    imports:  [ BrowserModule, ChartsModule], 
    declarations: [ AppComponent ], 
    bootstrap: [ AppComponent ] 
}) 
export class AppModule { } 

После imports массив вашего модуля содержит ChartsModule, вы будете иметь возможность использовать директивы и компоненты диаграммы без необходимости импортировать их в ваших компонентов.