title: ng2-charts - Can't bind to 'datasets' since it isn't a known property of 'base-chart'
body: <p><em>Versions: Cordova: 6.3.1, Gulp CLI: 1.2.2, Ionic framework: 2.0.0-rc.0, Ionic CLI Version: 2.1.0</em></p>
  
  <hr>
  
  <p>I'm using <a href="https://github.com/valor-software/ng2-charts" rel="nofollow noreferrer">ng2-charts</a> in my ionic2 application.</p>
  
  <p>Import not <code>import {ChartsModule} from "ng2-charts";</code>
  but <code>import {ChartsModule} from "ng2-charts/components/charts/charts;"</code> because of <a href="https://github.com/valor-software/ng2-charts/issues/440#issuecomment-251671800" rel="nofollow noreferrer">this (issue #440)</a> </p>
  
  <p>My entire <strong>app.module.ts</strong></p>
  
  <pre><code>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 { }
  </code></pre>
  
  <p><strong>ChartComponent</strong>:</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  @Component({
      selector: 'pie-chart',
      template: `
  
  &lt;base-chart
      class="chart"
      [datasets]="datasets"
      [labels]="labels"
      [options]="options"
      [chartType]="'doughnut'"&gt;Titel?
  &lt;/base-chart&gt;
  
  `
  })
  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() { }
  }
  </code></pre>
  
  <p>I thought this might be an issue with <code>Chart.js</code>. And I found that the <code>chart.js</code> installed with npm was resulting in a 404 when referencing it in my <code>index.html</code> as <code>node_modules/chart.js/src/chart.js</code>.</p>
  
  <p>So I downloaded the <code>Chart.bundle.min.js</code> after this didn't work I tried downloading the <code>Chart.js</code> itself. (placing it in <code>src/assets/js/...</code>). </p>
  
  <p>This problem was also addressed in <a href="https://stackoverflow.com/questions/40032174/ng2-charts-ng2-charts-js-does-not-export-chartsmodule">ng2-charts\ng2-charts.js does not export ChartsModule</a>  's comment section. But since no answer has been provided and this wasn't the root question, I posted this one.</p>
  
  <p><strong>Error:</strong> (suppressing the errormessage won't help since it's stopping my app from loading).</p>
  
  <pre><code>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 -&gt;][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 -&gt;][labels]="labels"
  
      [options]="options"
  "): ChartComponent@6:4
  </code></pre>