Использование сетки Ваадина в приложении angular2

Question

Я пытаюсь использовать сетку vaadin в своем приложении angular2... Согласно документации здесь https://vaadin.com/download я импортировал webcomponents-lite.min.js, vaadin-grid.html и директиву vaadin в этот пример http://plnkr.co/edit/B9216vP7kDlDkN44kriB?p=preview... Я не вижу никаких ошибок и не вижу сетки тоже... Может кто-нибудь, пожалуйста, скажите мне, что мне не хватает? Вот мои утверждения импорта в HTML

    <link rel="import" href="https://cdn.vaadin.com/vaadin-core-elements/latest/vaadin-grid/vaadin-grid.html">
<script src="http://polygit.org/polymer+:master/components/webcomponentsjs/webcomponents-lite.min.js"></script>

Это директива из документации

import {Directive, ElementRef, Input, Output, EventEmitter} from '@angular/core';

const Polymer = (<any>window).Polymer;

@Directive({selector: 'vaadin-grid'})
export class VaadinGrid {

@Output('grid-ready') gridReady: EventEmitter<any> = new EventEmitter(false);

private grid: any;

 constructor(el: ElementRef) {
if (!Polymer || !Polymer.isInstance(el.nativeElement)) {
  console.error("vaadin-grid has not been registered yet, please remember to import vaadin-grid.html in your main HTML page.");
  return;
}
this.grid = el.nativeElement;
}

ngAfterViewInit() {
// Configuration <table> might be placed in a wrong container.
// Let's move it in the light dom programmatically to fix that.
var localDomTable = this.grid.querySelector("table:not(.vaadin-grid)");
if (localDomTable) {
  Polymer.dom(this.grid).appendChild(localDomTable);
}

this.grid.then(() => {
  this.gridReady.emit(this.grid);
});
 }
}

Есть ли что-то, что мне нужно добавить для работы сетки vaadin в моем приложении angular2? Кто-нибудь, пожалуйста, помогите мне

Answer 1

Я сделал это работает http://plnkr.co/edit/SjoDN0zOnI88pffB31XK?p=preview

Я нашел две проблемы:

1) Кажется, что ссылка cdn на vaadin-grid.html недействительна. Поэтому я скопировал файлы из беседки.

2) Вы забыли подписаться на событие WebComponentsReady следующим образом:

window.addEventListener('WebComponentsReady', function() {
  System.import('app').catch(function(err){ console.error(err); });
});

Кроме того, я нашел хороший шаблон https://github.com/vaadin/expense-manager-ng2-demo

Надеюсь, это поможет вам!