ng2-charts - Can't bind to 'datasets' since it isn't a known property of 'base-chart'
angular, ionic2, ng2-charts
Solution
I've never used this library, but from just looking at the latest (1.4.1) version's source code, it should be used as an attribute on a canvas `@Directive({selector: 'canvas[baseChart]'})`
<canvas baseChart
class="chart"
[data]="datasets"
[labels]="labels"
[options]="options"
[chartType]="'doughnut'">
</canvas>
Problem
Versions: Cordova: 6.3.1, Gulp CLI: 1.2.2, Ionic framework: 2.0.0-rc.0, Ionic CLI Version: 2.1.0 I'm using ng2-charts in my ionic2 application. Import not `import {ChartsModule} from "ng2-charts";` but `import {ChartsModule} from "ng2-charts/components/charts/charts;"` because of this (issue #440) My entire app.module.ts ``` import { NgModule } from '@angular/core'; import { IonicApp, IonicModule } from 'ionic-angular'; import { ChartsModule } from 'ng2-charts/components/charts/charts'; import { MyApp } from './app.component'; import { EventsPage } from '../pages/events/events.component'; import { ChartComponent } from '../pages/chart/chart.component'; import { APICaller } from '../services/APICaller.service'; import { EventDetailComponent } from '../pages/event-detail/event-detail.component'; import { ParticipantDetail } from '../pages/participant-detail/participant-detail.component'; import { ParticipantFeedComponent } from '../pages/participant-feed/participant-feed.component'; @NgModule({ declarations: [ MyApp, EventsPage, EventDetailComponent, ParticipantDetail, ParticipantFeedComponent, ChartComponent ], imports: [ IonicModule.forRoot(MyApp), ChartsModule ], bootstrap: [IonicApp], entryComponents: [ MyApp, EventsPage, EventDetailComponent, ParticipantDetail, ParticipantFeedComponent, ChartComponent ], providers: [APICaller] }) export class AppModule { } ``` ChartComponent: ``` import { Component, OnInit } from '@angular/core'; @Component({ selector: 'pie-chart', template: ` <base-chart class="chart" [datasets]="datasets" [labels]="labels" [options]="options" [chartType]="'doughnut'">Titel? </base-chart> ` }) export class ChartComponent implements OnInit { private datasets = [ { label: "# of Votes", data: [12,19,3,5,2,3] } ]; private labels = ['Red', 'blue', 'yellow', 'green', 'purple', 'orange']; private options = { scales: { yAxes: [{ beginAtZero: true }] } }; constructor() { } ngOnInit() { } } ``` I thought this might be an issue with `Chart.js`. And I found that the `chart.js` installed with npm was resulting in a 404 when referencing it in my `index.html` as `node_modules/chart.js/src/chart.js`. So I downloaded the `Chart.bundle.min.js` after this didn't work I tried downloading the `Chart.js` itself. (placing it in `src/assets/js/...`). This problem was also addressed in ng2-charts\ng2-charts.js does not export ChartsModule 's comment section. But since no answer has been provided and this wasn't the root question, I posted this one. Error: (suppressing the errormessage won't help since it's stopping my app from loading). ``` polyfills.js:3 Unhandled Promise rejection: Template parse errors: Can't bind to 'datasets' since it isn't a known property of 'base-chart'. 1. If 'base-chart' is an Angular component and it has 'datasets' input, then verify that it is part of this module. 2. If 'base-chart' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. (" class="chart" [ERROR ->][datasets]="datasets" [labels]="labels" "): ChartComponent@4:4 Can't bind to 'labels' since it isn't a known property of 'base-chart'. 1. If 'base-chart' is an Angular component and it has 'labels' input, then verify that it is part of this module. 2. If 'base-chart' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. (" [datasets]="datasets" [ERROR ->][labels]="labels" [options]="options" "): ChartComponent@6:4 ```