CODEWITHSUNDEEP
angularwebpackng2-charts
EL missaoui habib
EL missaoui habib

Reputation: 1075

ng2-charts not working with angularjs2 webpack

I am trying to use ng2-charts with angularjs 2:

in app.ts :

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

my file html : 

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

in webpack.config.js alias: { 'ng2-charts': 'node_modules/ng2-charts' }

the error in browser or when execute npm test is : 

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)

Upvotes: 1

Views: 1212

Answers (1)

BeetleJuice
BeetleJuice

Reputation: 40886

The error message suggests that Angular doesn't recognize baseChart as a directive, so when you try to bind to [datasets], it looks for that property on canvas instead of baseChart.

If I'm right, the fix is to properly import ChartsModule into any module that needs it. Do not import it directly into your 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 { }

Once your module's imports array contains ChartsModule, you will be able to use the chart directives and components without the need to import them into your components.

Upvotes: 1

Related Questions