I am having some trouble getting charts to work correctly with my angular 2 application. I followed the Usage with Angular 2 instructions under the Vaadin Charts - Elements API section in the docs and I am having issues trying to use certain options for the charts. I can see that the docs haven’t been updated to the final angular 2 release yet, but I was hoping I could figure it out myself and just add the VaadinCharts and DataSeries imports to my app.module and then under the declarations. It seems to work with using the charts, as the chart will display with data, but when I try to use things in my HTML, like , , and others, I get errors in my web browser saying that those are not known elements. It mentions that if it’s a web component, add CUSTOM_ELEMENTS_SCHEMA to the @NGModule.schemas, but that didn’t help.
Does anyone know if I am missing something else or are Vaadin charts just not compatible with Angular 2 final release yet? Thanks for any help or suggestions.
There is a pull request to vaadin-charts
https://github.com/vaadin/vaadin-charts/pull/139 to update documentation and tests for Angular2 final version.
TL;DR Support for directives will be deprecated and we will promote the use of
angular2-polymer directive with the vaadin-charts. angular2-polymer works with the final version of Angular and you can find the docs for that in here
https://vaadin.com/docs/-/part/elements/angular2-polymer/overview.html . But one thing that has to be changed is to change your app to use NO_ERRORS_SCHEMA, as elements like are not supported with the custom elements syntax.
import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { PolymerElement } from '@vaadin/angular2-polymer';
import { AppComponent } from './app.component';
@NgModule({
imports: [BrowserModule]
,
declarations: [AppComponent, PolymerElement('vaadin-pie-chart')]
,
bootstrap: [AppComponent]
,
schemas: [NO_ERRORS_SCHEMA]
})
export class AppModule { }