Versions: Cordova: 6.3.1, Gulp CLI: 1.2.2, Ionic framework: 2.0.0-rc.0, Ionic CLI Version: 2.1.0
I am using ng2-charts in an ionic2 application.
Import not import {ChartsModule} from "ng2-charts"; but import {ChartsModule} from "ng2-charts/components/charts/charts;" due to this (issue # 440)
All my 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 could be a problem with Chart.js . And I found that Chart.js installed with npm leads to 404 when referenced in my index.html as node_modules/chart.js/src/chart.js .
So, I downloaded Chart.bundle.min.js after this did not work. I tried loading Chart.js . (putting it in src/assets/js/... ).
This issue was also addressed in ng2-charts \ ng2-charts.js does not export the ChartsModule comment section . But since no answer was provided, and this was not a fundamental question, I posted it.
Error: (suppressing errormessage will not help, since it stops loading my application).
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