I am trying to include a vaadin-grid in an Angular 2 application. Following your tutorial example I tried to declare PolymerElement(‘vaadin-grid’) in app.module.ts as follows:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { PeopleService } from './services/people.service';
import { PolymerElement } from '@vaadin/angular2-polymer';
import { AppComponent } from './app.component';
import { GridComponent } from './grid.component';
@NgModule({
declarations: [
AppComponent, GridComponent,
PolymerElement('vaadin-grid')
],
imports: [
BrowserModule,
FormsModule,
HttpModule
],
providers: [ PeopleService ]
,
bootstrap: [AppComponent]
,
schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})
export class AppModule { However, using release 2.4.4 of Angular 2 this construct is invalid per this error message:
ERROR in Error encountered resolving symbol values statically. Calling function ‘PolymerElement’, function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol AppModule in C:/Angular Projects/gridExample/src/app/app.module.ts, resolving symbol AppModule in C:/Angular Projects/gridExample/src/app/app.module.ts.
You also cannot use
directives
in an @Component anymore as was shown on the Angular 2 examples on this page:
https://vaadin.com/elements/-/element/vaadin-grid
How can this issue be resolved?
Thanks…