When Polymer is not imported, the import of @vaadin/angular2-polymer fails with the error message: “TypeError: Cannot read property 'Settings' of undefined”. We should elaborate it into something more helpful for users.

When i am trying to use polymer component i am getting below issue:

TypeError: Cannot read property 'indexOf' of undefined
at Object.PolymerElement (http://localhost:8080/node_modules/@vaadin/angular2-polymer/src/polymer-element.js:70:86)

Just did a test setup using angular rc.4 and an few Polymer elements. I didn't have to do anything. Attribute bindings seemed to work properly, events also worked smoothly.

What am I missing? Or, what should I try that won't work without the angular2-polymer component?

Hello,

I am facing an issue when I run my unit tests with karma on my project (angular-cli) with your directive.

15 06 2016 22:07:42.655:INFO [Chrome 51.0.2704 (Linux 0.0.0)]: Connected on socket /#nUTDqFlz7Z3B1E5WAAAA with id 90236010
Missing error handler on socket.
TypeError: (msg || "").replace is not a function
at /home/dev/angular2-polymer-integration/node_modules/karma/lib/reporter.js:45:23

Karma crashes and never runs my tests.

I have followed your guide about how to configure a project with angular-cli (https://vaadin.com/vaadin-documentation-portlet/elements/angular2-polymer/ng-cli.html) but seems like I still miss something.

I tried to configure my karma.conf.js in many different ways but still got the same error.
Without importing and using your directive, my tests can be launched without any problems.

Finally, I followed the discussion about the issue #7 and can reproduce the same behavior by downloading the project from @harshabonthu :

https://github.com/harshabonthu/angular2-polymer-integration

Do you have any idea about this issue ?

Here is my environment :
[email protected]
[email protected]
[email protected]
[email protected]
Chrome 51
Linux

• If the user installs the directive using ng install angular2-polymer everything in the project should be set to use the elements.
• Additionally we could add some kind of support for scaffolding.
• Everything should be set for vulcanizing when running ng build

I have been trying to implement polymer elements into an angular 2 application and this module works just fine for predefined polymer elements from their official site. However, I am trying to implement custom elements such as DigElements, an example usecase will be using elastic-client. I am able to pass in data into

in a non-angular 2 application, the returned value will be passed to client which then assigned to esclient in the dom element. However, I don't think this will work in an angular 2 application as angular treats {{esclient}} as an Input rather than Output.

<elastic-client
config='{"host": "http://localhost:9200"}'
client="{{esclient}}"></elastic-client>

in an angular 2 application, we can inject data into polymer elements using [ ] but is there a way of access the properties of the data and pass that to the angular 2 component?

<elastic-client
[config]='{"host": "http://localhost:9200"}'></elastic-client>

I have tried using native html element API to retrieve the properties of the polymer element but I think the method I was using was quite a messy one due to the behaviour of the polymer element which is works asynchronously.

I wonder if there is a way to of getting the callback data from a polymer element using this PolymerElement component?

Please advice.

Thanks
Nicholas

Hello,

I tried to upgrade my project with the last release of angular (rc5).

When I am using modules in angular2@rc5 way, the angular2-polymer directive seems not to be taking into account as a directive.

I"ve got this error :

Can't bind to 'invalid' since it isn't a known property of 'paper-input'.

1. If 'paper-input' is an Angular component and it has 'invalid' input, then verify that it is part of this module.
2. If 'paper-input' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message.
   (" <paper-input id="code" formControlName="code" label="code" ngDefaultControl
   [ERROR ->][invalid]="true"
   [errorMessage]="error"
   required maxlength="3" "): PolyAppComponent@15:19

I have reproduced the problem in two small projects :

https://github.com/sixrandanes/angular2-polymer-integration-rc4 (everything is ok)
https://github.com/sixrandanes/angular2-polymer-integration-rc5 (error template parser)

Thanks,

When I try and use the vaadin-date-picker as a directive in a component decorator, I get the following error. "Unhandled Promise rejection: TypeError: Cannot read property 'indexOf' of undefined" my component.ts file looks like this
`import { Component } from '@angular/core';
import { PolymerElement } from '@vaadin/angular2-polymer';

@component({
moduleId: module.id,
selector: 'polymer-test-app',
templateUrl: 'polymer-test.component.html',
styleUrls: ['polymer-test.component.css'],
directives: [
PolymerElement('vaadin-combo-box'),
PolymerElement('paper-input'),
PolymerElement('vaadin-date-picker')
]
})
export class PolymerTestAppComponent {
title = 'polymer-test works!';
myLabel='Select a number'
myValue = '4';
myItems = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
myDate = "1984-04-28";
}`

the combo-box works just fine so I am pretty sure I have the rest of my project set up correctly.

In apps which already use @angular2-material library, using polymer elements with angular2-polymer breaks material library css styles.

below line is causing issue:

PolymerDomAdapter.prototype.createStyleElement = function (css, doc) {
        if (doc === void 0) { doc = document; }
        var style = doc.createElement.call(doc, 'style', 'custom-style');
        this.appendChild(style, this.createTextNode(css));
        return style;
    };

Because the above code uses prototype and overrides the default createStyleElement function, it causes all styles to be converted to <style is="custom=style"> tags, thus breaking existing material library styles. Is there a work around for this?

Hey guys, I know this isn't really your area of concern, but I thought maybe you'd have some opinion/experience to share. It might help those who are trying to get going with angular2-polymer.

The paper-input component has a "changed" event that you can use to implement 2-way binding. I'm looking for an equivalent for paper-dropdown-menu. The paper-dropdown-menu api provides the "value" property as a getter, but not as an event.

paper-listbox has an event like the one described ("iron-select"), but the event data does not tell you which paper-dropdown-menu it is a child of.

So far the best way I've been able to accomplish data binding is by listening to all paper-listbox "iron-select" events, and then grabbing the values of all dropdowns every time.

In Angular2:

/* template */

<paper-dropdown-menu #dropdown1 label="Your favourite pastry">
  <paper-listbox (iron-select)="onSelectDropdown($event)" class="dropdown-content">
    <paper-item>Croissant</paper-item>
    <paper-item>Donut</paper-item>
    <paper-item>Financier</paper-item>
    <paper-item>Madeleine</paper-item>
  </paper-listbox>
</paper-dropdown-menu>

//and another 2...

/* class */

@ViewChild('dropdown1') dropdown1:any;
@ViewChild('dropdown2') dropdown2:any;
@ViewChild('dropdown3') dropdown3:any;

onSelectDropdown(event:any){
  setTimeout(()=>{
    this.data = {
     thing1: this.dropdown1.nativeElement.value;
     thing2: this.dropdown2.nativeElement.value;
     thing3: this.dropdown3.nativeElement.value;
    }
  }, 0);
}

This does not seem like a very elegant way to do it, especially since I have to wrap the getter ("value") calls in a timeout. This is because the event fires before it propagates to the parent (paper-dropdown-menu).

Any thoughts on this?

Custom CSS mixins doesn't always work when the mixin value is an object.

For example lets take a look at app-drawer's style properties:

import { Component, ViewEncapsulation } from '@angular/core';

import './styles/main.scss';

@Component({
  selector: 'ns-app',
  encapsulation: ViewEncapsulation.None,
  template: `    
    <app-drawer opened>
      <div style="height: 100%; overflow: auto;">
      <ul>
        <li>menu item</li>
      </ul>
      </div>
    </app-drawer>
  `,
  styles: [`
    app-drawer {

      /* when the custom property's value is a string it works */
      --app-drawer-width: 350px;

      /* when the custom property's value is an object it doesn't work */
      --app-drawer-content-container: {
        background-color: red;
      }
    }
  `]
})
export class AppComponent {
}

ping @platosha

I have been trying to integrate angular2-polymer with angular2-seed from past 2 days; but couldn't make it.

Need help very badly!

Here is the error in console:

Trying to compile angular2-polymer against the latest RC of Angular 2, we get following compilation errors.

src/polymer-element.ts(22,62): error TS2339: Property 'BrowserDomAdapter' does not exist on type '{ DomAdapter: typeof DomAdapter; getDOM: () => DomAdapter; setRootDomAdapter: (adapter: DomAdapte...'.
src/polymer-element.ts(25,10): error TS2339: Property 'appendChild' does not exist on type 'PolymerDomAdapter'.
src/polymer-element.ts(25,34): error TS2339: Property 'createTextNode' does not exist on type 'PolymerDomAdapter'.
src/polymer-element.ts(65,32): error TS2339: Property 'setDOM' does not exist on type '{ DomAdapter: typeof DomAdapter; getDOM: () => DomAdapter; setRootDomAdapter: (adapter: DomAdapte...'.
src/polymer-element.ts(68,32): error TS2339: Property 'setDOM' does not exist on type '{ DomAdapter: typeof DomAdapter; getDOM: () => DomAdapter; setRootDomAdapter: (adapter: DomAdapte...'.

Hi,

events are not working for buttons/paper-button/a when they are placed inside Grid (angular2)

Please help me!

My Template:

<vaadin-grid #grdPAssociates [frozenColumns]="1" visible-rows="5" (selected-items-changed)="selected(grdPAssociates)">
    <table>
        <colgroup>
            <col name="Edit" width="50px">
            <col name="name" sortable>
            <col name="Technology" sortable>
            <col name="designation" sortable>
            <col name="department" sortable>
            <col name="joiningDate" sortable width="120px">
            <col name="hrAdvisor" sortable>
            <col name="Profile" sortable>
            <col name="Delete" width="100px">
        </colgroup>
        <thead>
            <tr>
                <th>Edit</th>
                <th>Name</th>
                <th>Technology</th>
                <th>Designation</th>
                <th>Department</th>
                <th>DOJ</th>
                <th>Advisor</th>
                <th><i class="fa fa-user" aria-hidden="true"></i> Profile</th>
                <th>Delete</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let associate of _prosAssociates">
                <td>
                    <paper-icon-button icon="edit">Edit</paper-icon-button>
                </td>
                <td>{{associate.name}}</td>
                <td>{{associate.Technology}}</td>
                <td>{{associate.designation}}</td>
                <td>{{associate.department}}</td>
                <td>{{associate.joiningDate}}</td>
                <td>{{associate.hrAdvisor}}</td>
                <td>
                    {{associate.ID}}
                    <paper-icon-button icon="favorite">Profile</paper-icon-button>
                    <button (click)="deletePAsscociate($event)">Delete</button>
                </td>
                <td>
                    <a (click)="deletePAsscociate(associate.ID)">
                        <paper-button raised class="custom">
                            <paper-icon-button icon="delete"></paper-icon-button>
                        </paper-button>
                    </a>
                </td>
                <td>{{associate.name}}</td>
            </tr>
        </tbody>
    </table>
</vaadin-grid>

Component:

import { Component, OnInit, Injector, ViewChild } from '@angular/core';
import { AppInjector } from '../../shared/injector';

import { DataStore, IDataStore } from '../../../implementations/datastore';
import { PolymerElement } from '@vaadin/angular2-polymer';
import { Associate } from '../../../models/models';
import { Config } from '../../../config/config';
import * as moment from 'moment';

@Component({
    selector: 'prospective-associate',
    directives: [PolymerElement('vaadin-grid'), PolymerElement('iron-icon')],
    templateUrl: 'app/components/associates/template/prospective.associate.component.html',
    styles: ['/app/assets/css/grid.css'],

})

//Edit  Name    Technology  Designation Department  DOJ HR Advisor  Profile Delete
export class ProspectiveAssociateComponent implements OnInit {

    @ViewChild('grdPAssociates') grdPAssociates: any;

    private _service: IDataStore<Associate>;
    private _config: Config;
    _prosAssociates: Associate[];

    constructor(private _injector: Injector = AppInjector()) {
        this._config = _injector.get(Config);
        this._service = new DataStore<Associate>(this._config.get('API').Associate);
    }

    ngOnInit() {
        this._service.list().subscribe((res) => { console.log(res); this._prosAssociates = res });
    }

    ngAfterViewInit() {
        this.grdPAssociates.nativeElement.then(() => {
            this.onGridReady(this.grdPAssociates.nativeElement);
        });
    }

    deletePAssociate(rowIndex) {
        swal(rowIndex);
    }

    private selected(grid) {
        var selection = grid.selection.selected();
        if (selection.length === 1) {
            grid.selection.clear();
            grid.getItem(selection[0], (err, item) => {
                console.log(item);
            });
        }
    }
    onGridReady(grid) {
        grid.cellClassGenerator = (cell) => {
            // if (cell.columnName === 'status') {
            //     return 'status-' + cell.data.replace(/ /g, '-').toLowerCase();
            // }
        };

        grid.rowDetailsGenerator = function (rowIndex) {
            var detail = document.createElement("div");
            detail.textContent = "Row detail content for row " + rowIndex;
            return detail;
        };

        // grid.addEventListener('sort-order-changed', (e) => {
        //     var sortBy = grid.columns[e.detail.value[0].column].name;
        //     this.sortOrder = { sortBy: sortBy, direction: e.detail.value[0].direction };

        //     // sort order is fired for the first time before grid has been initialized properly,
        //     // so scrolling will crash.
        //     try {
        //         grid.scrollToStart(0);
        //         grid.refreshItems();
        //     } catch (err) {

        //     }
        // });

        // grid.columns[5].renderer = (cell) => {
        //     // if (cell.data) {
        //     //     cell.element.innerHTML = moment(cell.data).format('YYYY-MM-DD');
        //     // } else {
        //     //     cell.element.innerHTML = "";
        //     // }
        // };

        // grid.columns[8].renderer = (cell) => {
        //     // cell.element.innerHTML = "<i class='deleteIcon fa fa-times' aria-hidden='true' on-click='deletePAsscociate(" + cell.row.index + ")'></i>";
        //     cell.element.innerHTML = "<a onclick='deletePAssociate(" + cell.row.index + ")'><paper-icon-button icon='delte'></paper-icon-button>Delete</a>";
        //     // cell.element.innerHTML = "<paper-icon-button icon='delete' (click)='deletePAsscociate(" + cell.row.index + ")'>Delete</paper-icon-button>";
        // };
    }
}

tldr: When children of paper-dropdown-menu are updated by Angular, the parent does not reload or react to the change. The "selected" option does not bind to the new items, for example, unless we update it as well. The example code is available here: https://github.com/dirtysanchez69/issue-angular2-polymer

Say I have a paper-dropdown-menu, as such (this works fine):

//hardcoded options and selection

<paper-dropdown-menu label="hardcoded options and selection">
  <paper-listbox 
  [selected]="1"
  class="dropdown-content">
    <paper-item *ngFor="let option of ['hi', 'hello', 'yo']">{{option}}</paper-item>
  </paper-listbox>
</paper-dropdown-menu>

In this case, the child (paper-item) is presumably parsed before the parent (paper-listbox), and the parent selects the second of its children to be the selected value.

Now, if the options arrive a bit later, after an async event, the options (paper-items) are updated just fine, but we lose the selected value.

//hardcoded selection

<paper-dropdown-menu label="hardcoded selection">
  <paper-listbox 
  [selected]="1"
  class="dropdown-content">
    <paper-item *ngFor="let option of dropdownOptions.fruit">{{option}}</paper-item>
  </paper-listbox>
</paper-dropdown-menu>

If dropdownOptions.fruit is initialized with some values, we see the selected value, but upon updating them, the selected value disappears.

Now, if we also bind the selected value, and we update that as well upon receiving the new data, then the new selected value is displayed (hooray). However, this only works if we actually change the value of the "selected" property. If we initialize this value to 1, then we must pick another number in order to trigger the update (which still leaves us with a problem).

<paper-dropdown-menu label="selection refresh" #fruitDropdown >
  <paper-listbox 
  [selected]="userData.fruitSelection"
  class="dropdown-content">
    <paper-item *ngFor="let option of dropdownOptions.fruit">{{option}}</paper-item>
  </paper-listbox>
</paper-dropdown-menu>

What do you think of this?
Is there a clean way to forcibly trigger a reload on a polymer element?

There are issues when using this with a Mobile Toolkit project, specifically with app-shell by @mgechev.
You can find the docs to create one of these projects with the angular-cli here.

Everything works fine up until you try to actually use of the Polymer elements via something like:

PolymerElement('paper-toolbar')

Then you get errors due to the use of window:

var Polymer = window.Polymer;
ReferenceError: window is not defined

angular-cli: 1.0.0-beta.6
node: 4.4.3
os: darwin x64

"dependencies": {
    "@angular/common": "2.0.0-rc.1",
    "@angular/compiler": "2.0.0-rc.1",
    "@angular/core": "2.0.0-rc.1",
    "@angular/http": "2.0.0-rc.1",
    "@angular/platform-browser": "2.0.0-rc.1",
    "@angular/platform-browser-dynamic": "2.0.0-rc.1",
    "@angular/platform-server": "2.0.0-rc.1",
    "@angular/router-deprecated": "2.0.0-rc.1",
    "@vaadin/angular2-polymer": "1.0.0-beta1",
    "angular2-broccoli-prerender": "0.11.5",
    "angular2-express-engine": "0.13.0",
    "angular2-universal": "0.100.5",
    "angular2-universal-polyfills": "0.4.1",
    "angularfire2": "2.0.0-beta.1",
    "body-parser": "1.15.1",
    "es6-shim": "0.35.1",
    "firebase": "3.0.4",
    "preboot": "2.1.2",
    "reflect-metadata": "0.1.3",
    "rxjs": "5.0.0-beta.6",
    "systemjs": "0.19.27",
    "zone.js": "0.6.12"
  },
  "devDependencies": {
    "@angular/service-worker": "0.2.0",
    "@angular/app-shell": "0.0.0",
    "angular-cli": "1.0.0-beta.6",
    "codelyzer": "0.0.20",
    "ember-cli-inject-live-reload": "1.4.0",
    "jasmine-core": "2.4.1",
    "jasmine-spec-reporter": "2.5.0",
    "karma": "0.13.22",
    "karma-chrome-launcher": "1.0.1",
    "karma-jasmine": "1.0.2",
    "protractor": "3.3.0",
    "ts-node": "0.7.3",
    "tslint": "3.11.0",
    "typescript": "1.8.10",
    "typings": "0.8.1"
  }

This exception occurs:

The Broccoli Plugin: [AppShellPlugin] failed with:
Error: Command failed: /bin/sh -c node /Users/splaktar/Git/tf/webapp/node_modules/angular2-broccoli-prerender/dist/child_proc.js  --sourceHtml=/Users/splaktar/Git/tf/webapp/tmp/app_shell_plugin-input_base_path-SJdQBGZZ.tmp/0/index.html --optionsPath=/Users/splaktar/Git/tf/webapp/tmp/app_shell_plugin-input_base_path-SJdQBGZZ.tmp/0/main-app-shell --outputIndexPath=/Users/splaktar/Git/tf/webapp/tmp/app_shell_plugin-output_path-pj5EpfjV.tmp/index.html
/Users/splaktar/Git/tf/webapp/node_modules/@vaadin/angular2-polymer/src/polymer-element.js:11
var Polymer = window.Polymer;
              ^

ReferenceError: window is not defined
    at Object.<anonymous> (/Users/splaktar/Git/tf/webapp/node_modules/@vaadin/angular2-polymer/src/polymer-element.js:11:15)
    at Module._compile (module.js:409:26)
    at Object.Module._extensions..js (module.js:416:10)
    at Module.load (module.js:343:32)
    at Function.Module._load (module.js:300:12)
    at Module.require (module.js:353:17)
    at require (internal/module.js:12:17)
    at Object.<anonymous> (/Users/splaktar/Git/tf/webapp/node_modules/@vaadin/angular2-polymer/index.js:2:25)
    at Module._compile (module.js:409:26)
    at Object.Module._extensions..js (module.js:416:10)

    at ChildProcess.exithandler (child_process.js:213:12)
    at emitTwo (events.js:87:13)
    at ChildProcess.emit (events.js:172:7)
    at maybeClose (internal/child_process.js:827:16)
    at Socket.<anonymous> (internal/child_process.js:319:11)
    at emitOne (events.js:77:13)
    at Socket.emit (events.js:169:7)
    at Pipe._onclose (net.js:477:12)

The broccoli plugin was instantiated at: 
    at AppShellPlugin.Plugin (/Users/splaktar/Git/tf/webapp/node_modules/broccoli-plugin/index.js:10:31)
    at AppShellPlugin.CachingWriter [as constructor] (/Users/splaktar/Git/tf/webapp/node_modules/broccoli-caching-writer/index.js:21:10)
    at new AppShellPlugin (/Users/splaktar/Git/tf/webapp/node_modules/angular2-broccoli-prerender/dist/prerender.js:15:16)
    at Angular2App._buildTree (/Users/splaktar/Git/tf/webapp/node_modules/angular-cli/lib/broccoli/angular2-app.js:153:48)
    at new Angular2App (/Users/splaktar/Git/tf/webapp/node_modules/angular-cli/lib/broccoli/angular2-app.js:53:23)
    at module.exports (/Users/splaktar/Git/tf/webapp/angular-cli-build.js:10:10)
    at Class.module.exports.Task.extend.setupBroccoliBuilder (/Users/splaktar/Git/tf/webapp/node_modules/angular-cli/node_modules/angular-cli/lib/models/builder.js:55:19)
    at Class.module.exports.Task.extend.init (/Users/splaktar/Git/tf/webapp/node_modules/angular-cli/node_modules/angular-cli/lib/models/builder.js:89:10)
    at new Class (/Users/splaktar/Git/tf/webapp/node_modules/angular-cli/node_modules/core-object/core-object.js:18:12)
    at Class.module.exports.Task.extend.run (/Users/splaktar/Git/tf/webapp/node_modules/angular-cli/node_modules/angular-cli/lib/tasks/serve.js:15:19)
    at /Users/splaktar/Git/tf/webapp/node_modules/angular-cli/node_modules/angular-cli/lib/commands/serve.js:64:24
    at lib$rsvp$$internal$$tryCatch (/Users/splaktar/Git/tf/webapp/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:1036:16)
    at lib$rsvp$$internal$$invokeCallback (/Users/splaktar/Git/tf/webapp/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:1048:17)
    at /Users/splaktar/Git/tf/webapp/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:331:11
    at lib$rsvp$asap$$flush (/Users/splaktar/Git/tf/webapp/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:1198:9)
    at nextTickCallbackWith0Args (node.js:420:9)

Thanks for making this available! I'm disabling app-shell in my project for now by making this change to angular-cli.json:

    "mobile": false

When I install vaadin-elements like vaadin-grid the build returns an error

The Broccoli Plugin: [BroccoliTypeScriptCompiler] failed with:
Error: Typescript found the following errors:
  A:/SERVIDOR/htdocs/angular2/weqom-polymer/tmp/broccoli_type_script_compiler-input_base_path-dW9fL9Rd.tmp/0/public/bower_components/vaadin-grid/demo/angular-grid-dom.ts (1, 49): Cannot find module 'angular2/angular2'.
...
...

Any solution to exclude the demo files of vaadin components, in order to use vaadin components propertly

Great job, greetings from Spain

Hello again ;)

Not sure if this is a problem with this library or the polymer library so I'll post it here first:

I'm using the following code to try to implement the google-map component:

<google-map latitude="37.779" longitude="-122.3892" zoom="13" api-key="...mykey..."></google-map>

but the browser is still complaining about missing api keys:

No Google Maps API Key or Client ID specified. See https://developers.google.com/maps/documentation/javascript/get-api-key for instructions to get started with a key or client id.
google-maps-api.html:130No Google Maps API Key or Client ID specified. See https://developers.google.com/maps/documentation/javascript/get-api-key for instructions to get started with a key or client id.
js?callback=https___maps_googleapis_com_maps_api_js_callback___callback___v_3_exp_libraries_drawing…:96 You have included the Google Maps API multiple times on this page. This may cause unexpected errors.Xg @ js?callback=https___maps_googleapis_com_maps_api_js_callback___callback___v_3_exp_libraries_drawing…:96(anonymous function) @ js?callback=https___maps_googleapis_com_maps_api_js_callback___callback___v_3_exp_libraries_drawing…:129google.maps.Load @ js?callback=https___maps_googleapis_com_maps_api_js_callback___callback___v_3_exp_libraries_drawing…:21(anonymous function) @ js?callback=https___maps_googleapis_com_maps_api_js_callback___callback___v_3_exp_libraries_drawing…:129(anonymous function) @ js?callback=https___maps_googleapis_com_maps_api_js_callback___callback___v_3_exp_libraries_drawing…:130
util.js:207 Google Maps API warning: NoApiKeys https://developers.google.com/maps/documentation/javascript/error-messages#no-api-keys

The generated code looks like this in chrome's code inspector:

<google-map latitude="37.779" longitude="-122.3892" api-key="...mykey..." zoom="13">
    <google-maps-api id="api" class="style-scope google-map"></google-maps-api>
    <div id="map" class="style-scope google-map"><div style="overflow: hidden;"></div></div>
    <iron-selector id="selector" selected-attribute="open" activate-event="google-map-marker-open" class="style-scope google-map">
    </iron-selector>
  </google-map>

You'll notice that the generated google-maps-api element is missing the api-key attribute. Could this be the cause of the errors?

Max

Thanks a lot for the work on integration, I think it looks good to use polymer based components in Angular.

I am trying to integrate polymer using your package in a sample project generated with angular-cli and was able to do it without much trouble. When I try to run the unit tests using ng test, I see the below error. Not sure if I am missing anything, I've uploaded the code here https://github.com/harshabonthu/angular2-polymer-integration

system-polyfills.js:4 Potentially unhandled rejection [3] TypeError: Cannot read property 'forEach' of undefined at Object.PolymerElement (http://localhost:9876/base/dist/vendor/@vaadin/angular2-polymer/src/polymer-element.js:10:20) at eval (http://localhost:9876/base/dist/app/poly.component.js:24:36) at Object.eval (http://localhost:9876/base/dist/app/poly.component.js:31:2) at eval (http://localhost:9876/base/dist/app/poly.component.js:34:4) at eval (http://localhost:9876/base/dist/app/poly.component.js:35:3) at Object.eval (http://localhost:9876/base/dist/app/poly.component.spec.js:3:24) at eval (http://localhost:9876/base/dist/app/poly.component.spec.js:15:4) at eval (http://localhost:9876/base/dist/app/poly.component.spec.js:16:3) at F (http://localhost:9876/base/dist/vendor/systemjs/dist/system-polyfills.js:4:7484) at H (http://localhost:9876/base/dist/vendor/systemjs/dist/system-polyfills.js:4:7116) at q.when (http://localhost:9876/base/dist/vendor/systemjs/dist/system-polyfills.js:4:10790) at b.run (http://localhost:9876/base/dist/vendor/systemjs/dist/system-polyfills.js:4:9826) at t._drain (http://localhost:9876/base/dist/vendor/systemjs/dist/system-polyfills.js:4:1744) at drain (http://localhost:9876/base/dist/vendor/systemjs/dist/system-polyfills.js:4:1398) at MutationObserver.e (http://localhost:9876/base/dist/vendor/systemjs/dist/system-polyfills.js:4:3319) at ZoneDelegate.invoke (http://localhost:9876/base/dist/vendor/zone.js/dist/zone.js:323:29) at Zone.runGuarded (http://localhost:9876/base/dist/vendor/zone.js/dist/zone.js:230:48) at MutationObserver.<anonymous> (http://localhost:9876/base/dist/vendor/zone.js/dist/zone.js:206:30) Evaluating http://localhost:9876/base/dist/app/poly.component.js Evaluating http://localhost:9876/base/dist/app/poly.component.spec.js Error loading http://localhost:9876/base/dist/app/poly.component.spec.js

Connected to #7

I tried creating a wrapper around paper-input component like below. The component works fine, but when I focus, I get below errors.

x-input.html

<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/paper-input/paper-input.html">
<dom-module id="x-input">
    <template>
        <paper-input label="[[label]]" value={{value}}></paper-input>
    </template>
</dom-module>

<script>
Polymer({
        is: 'x-input',       
        behaviors: [
            Polymer.IronFormElementBehavior,
            Polymer.PaperInputBehavior
        ]
    });
</script>

Usage:
<nlsn-input label="Name" [(ngModel)]="hero.name"></nlsn-input>

Errors when I click inside the input field.

zone.js:260 Uncaught TypeError: Cannot read property 'focus' of undefined
_focusBlurHandler   @   paper-input-behavior.html:453
ZoneDelegate.invokeTask @   zone.js:356
Zone.runTask    @   zone.js:256
ZoneTask.invoke @   zone.js:423
fire    @   polymer.html:1280
_focusBlurHandler   @   iron-control-state.html:79
_focusBlurHandler   @   paper-input-behavior.html:449
ZoneDelegate.invokeTask @   zone.js:356
Zone.runTask    @   zone.js:256
ZoneTask.invoke @   zone.js:423

Any idea how to fix this?

Currently the output of Cannot read property 'forEach' of undefined is really hard for beginners to diagnose. This can be caused by a number of things and it would be nice to either have the docs cover it or to improve the error message.

Causes

• When passing in invalid components to PolymerElement like PolymerElement('thanks-vaadin')
• Not importing the component via something like <link rel="import" href="bower_components/iron-icons/av-icons.html">
• Probably some others...

Full stack trace:

zone.js:461 Unhandled Promise rejection: TypeError: Cannot read property 'forEach' of undefined
        at Object.PolymerElement (http://localhost:4200/vendor/@vaadin/angular2-polymer/src/polymer-element.js:71:20)
        at eval (http://localhost:4200/app/+landing/landing.component.js:41:36)
        at Object.eval (http://localhost:4200/app/+landing/landing.component.js:48:2)
        at eval (http://localhost:4200/app/+landing/landing.component.js:51:4)
        at eval (http://localhost:4200/app/+landing/landing.component.js:52:3)
    Evaluating http://localhost:4200/app/+landing/landing.component.js
    Evaluating http://localhost:4200/app/+landing/index.js
    Evaluating http://localhost:4200/app/app.component.js
    Evaluating http://localhost:4200/app/index.js
    Evaluating http://localhost:4200/main.js
    Error loading http://localhost:4200/main.js ; Zone: <root> ; Task: Promise.then ; Value: Error: TypeError: Cannot read property 'forEach' of undefined(…)consoleError @ zone.js:461_loop_1 @ zone.js:490drainMicroTaskQueue @ zone.js:494ZoneTask.invoke @ zone.js:426

zone.js:463 Error: Uncaught (in promise): Error: TypeError: Cannot read property 'forEach' of undefined(…)
    consoleError        @   zone.js:463
    _loop_1             @   zone.js:490
    drainMicroTaskQueue @   zone.js:494
    ZoneTask.invoke     @   zone.js:426

The two way databinding does seem to work only in one direction. The value gets set on the paper-input but when changing, the model field (customer.firstname in this case) is not being updated.

<paper-input [(value)]="customer.firstname" label="Firstname"></paper-input>

(Version v1.0.0-beta2)

The first priority is to test if the tutorial can be followed end completed by developers. I.e., test for the functionality first.

The “feels at home” experience testing is the second priority.

Hey there,

This is an awesome Angular 2 & Polymer integration, in developer mode it works just fine, but when I tried to use it in production mode, using this repository https://github.com/vaadin-marcus/angular2-polymer-tutorial, it didn't work well:

ng serve -prod

404 http://localhost:4200/bower_components/webcomponentsjs/webcomponents-lite.js Failed to load resource: the server responded with a status of 404 (Not Found)
404 http://localhost:4200/bower_components/vaadin-grid/vaadin-grid.min.js Failed to load resource: the server responded with a status of 404 (Not Found)

I don't know why but the angular-cli remove the .js files from the bower_components folder.

marcushellberg/angular2-polymer-tutorial#1

Cannot import app-grid.

const PolymerComponents = [
  PolymerElement('app-drawer'),
  PolymerElement('app-drawer-layout'),
  // PolymerElement('app-grid'),
  PolymerElement('app-scrollpos-control'),
  PolymerElement('app-header'),
  PolymerElement('app-toolbar'),
  PolymerElement('app-header-layout'),
  PolymerElement('app-box')
];

It is probably because the app-grid folder doesn't contain an app-grid.html but an app-grid-style.html. And PolymerElement's name input, i keep getting this error.

<!-- bower_components/app-layout/app-layout.html -->
<link rel="import" href="helpers/helpers.html">
<link rel="import" href="app-drawer/app-drawer.html">
<link rel="import" href="app-drawer-layout/app-drawer-layout.html">
<link rel="import" href="app-grid/app-grid-style.html">
<link rel="import" href="app-header/app-header.html">
<link rel="import" href="app-header-layout/app-header-layout.html">
<link rel="import" href="app-scrollpos-control/app-scrollpos-control.html">
<link rel="import" href="app-toolbar/app-toolbar.html">
<link rel="import" href="app-box/app-box.html">

ping @platosha

In an Angular 2 app, zone.js basically polyfills/overrides native functions like addEventListener, setTimeout etc.

When event listeners are added using addEventListener function, they get registered in the zone.js and effectively are used to detect changes inside the app.

In practice, components like vaadin-grid and vaadin-combo-box listen to scroll event, therefore scrolling these components will trigger the execution of ngDoCheck function on every directive/component in the app on every event.

This will most likely cause performance issues like we already saw earlier when hovering over vaadin-charts.

To fix this, we should be able to somehow register our event listeners outside Angular using

this.zone.runOutsideAngular(() => { 
  // call addEventListeners here. 
});

• Follow the structure of core elements README files
• Add quick usage example
• Link the tutorial in the Getting Started section
• Contributing, Development, and License sections
• Add badges

Using the paper-drodpwn-menu in conjunction with ngControl leads to the following error:

ORIGINAL EXCEPTION: TypeError: Cannot set property value of # which has only a getter

<form [ngFormModel]="form">
  <paper-dropdown-menu label="Manufacturer" ngControl="manufacturer">
    <paper-listbox class="dropdown-content">
      <paper-item>Opel</paper-item>
      <paper-item>Seat</paper-item>
      <paper-item>Ford</paper-item>
      <paper-item>Audi</paper-item>
    </paper-listbox>
  </paper-dropdown-menu>
</form>

import { Component } from '@angular/core';
import { ControlGroup, FormBuilder, Validators } from '@angular/common';
import { PolymerElement } from '@vaadin/angular2-polymer';

@Component({
  moduleId: module.id,
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css'],
  directives: [
    PolymerElement('paper-dropdown-menu')
  ]
})
export class AppComponent {

  private form: ControlGroup;

  private car = {
    manufacturer: ''
  };

  constructor(private fb: FormBuilder) {
  }

  public ngOnInit(): void {
    this.form = this.fb.group({
      manufacturer: [this.car.manufacturer]
    });
  }
}

I can only bind the swipeOpen property primitive type of app-drawer with <app-drawer [swipeOpen]="true"></app-drawer>. This doesn't work: <app-drawer swipeOpen></app-drawer>.

But i don't quite understand because the opened property works fine<app-drawer opened></app-drawer>

cc @platosha

Hey there,

I forked the https://github.com/vaadin-marcus/angular2-polymer-tutorial repository, and did some optimizations using gulp tasks:

https://github.com/evertonrobertoauler/angular2-polymer-tutorial

marcushellberg/angular2-polymer-tutorial#2

I'm interested in help to improve this idea, I didn't found a way to build a plugin for the angular-cli yet, but as son i find out, I'll try to do it.

Have a look, if you guys like it or have some better ideas I'd like to hear it.

Hi,

Project created using angular-cli@webpack would return the following errors when running ng serve, in Firefox and IE11.

Polymer is loaded after main.ts.

TypeError: Polymer is undefined

main.bundle.js:74673 webpack_require() inline.js:53 main.bundle.js:14863 webpack_require() inline.js:53 main.bundle.js:64712 webpack_require() inline.js:53 main.bundle.js:64699 webpack_require() inline.js:53 main.bundle.js:64875 webpack_require() inline.js:53 main.bundle.js:64140 webpack_require() inline.js:53 main.bundle.js:64195 webpack_require() inline.js:53 main.bundle.js:49483 webpack_require() inline.js:53 main.bundle.js:79944 webpack_require() inline.js:53 webpackJsonpCallback() inline.js:24

How can I do without using document.addEventListener('WebComponentsReady', function() [..] in index.html?

I put something like that into index.html :

<script> window.Polymer = window.Polymer || {}; window.Polymer.dom = 'shadow'; </script>

But I got this error :
TypeError: Polymer.Settings is undefined

Hello,

any hints on how to set-up the project with Webpack?
I'm struggling to find the equivalent of

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

to ensure the load order.

The documentation in has "Angular-CLI" mentioned in several places. This should be replaced consistently with "Angular CLI" (without the dash) as it is the correct spelling of the product name.

Hi,

I'm trying to bind the google-map and google-map-marker latitude and longitude attributes to component properties like so:

<google-map-marker [latitude]="position?.coords.latitude" [longitude]="position?.coords.longitude" title="You be here!"></google-map-marker>

... but get the following error:

Unhandled Promise rejection: Template parse errors:
Can't bind to 'latitude' since it isn't a known property of 'google-map'.
1. If 'google-map' is an Angular component and it has 'latitude' input, then verify that it is part of this module.
2. If 'google-map' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message.
 ("
<paper-input label="Input label"></paper-input>
<div [hidden]="!position">
  <google-map [ERROR ->][latitude]="position?.coords.latitude" [longitude]="position?.coords.longitude" fit-to-markers>
    "): AppComponent@36:14
Can't bind to 'longitude' since it isn't a known property of 'google-map'.
1. If 'google-map' is an Angular component and it has 'longitude' input, then verify that it is part of this module.
2. If 'google-map' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message.
 ("l"></paper-input>
<div [hidden]="!position">
  <google-map [latitude]="position?.coords.latitude" [ERROR ->][longitude]="position?.coords.longitude" fit-to-markers>
    <google-map-marker latitude="position?."): AppComponent@36:53 ; Zone: <root> ; Task: Promise.then ; Value: 

Is what I'm trying to do supported? How should it be done?

Thanks
Max

In order to simplify usage of Polymer elements in Angular components and get rid of the nativeElement requirement to access the element‘s API, the directive could construct an adapter for the element’s prototype, and expose it for use with @ViewChild. Consider the following use case:

@Component({
  template: `<vaadin-combo-box #comboBox></vaadin-combo-box>`
})
export class MyComponent {
  @ViewChild('comboBox') comboBoxRef: any;
  onAfterViewInit() {
    this.comboBoxRef.items = ['foo', 'bar', 'baz'];
    this.comboBoxRef.open();
  }
}

The forms module in Angular 2 had a breaking change, so now the new one is coming and the old one is going to be deprecated.

When running tests with Angular 2 rc4, I’ve got this warning in console:

ng_form_model.ts:48:


      *It looks like you're using the old forms module. This will be opt-in in the next RC, and
      will eventually be removed in favor of the new forms module. For more information, see:
      https://docs.google.com/document/u/1/d/1RIezQqE4aEhBRmArIAS1mRIZtWFf6JxN_7B4meyWK0Y/pub

We should probably upgrade to the new forms module.

I get the below error when using ngForm as per RC4.

Error: Uncaught (in promise): No value accessor for 'email'

  <form  class="login-form" (ngSubmit)="login(loginForm.value)" #loginForm="ngForm">
            <paper-input [(ngModel)]="model.email" name="email" #email="ngModel" [(value)]="model.email"   name="email" label="E-Mail"></paper-input>
            <paper-input [(value)]="model.password" [(ngModel)]="model.password" name="password" #password="ngModel" type="password" label="Password"></paper-input>
             <button type="submit" class="btn waves-effect waves-light col s12"  block >Login</button>
         </form>

but the value is passed to the login().

If i remove the [(ngModel)]= and #email="ngModel" there is no errors but no values is being passed to the login().

When do we expect support for RC4, i upgraded angular2 but i end up getting a blank screen.

A user might need to turn off certain subdirectives.

For example, when a user wants to use ngControl together with an [invalid] binding, the binding will not work because the value of the invalid property gets overwritten by the validationDirective subdirective. See also: vaadin/vaadin-date-picker#215

I Have the following in my Custom Polymer Element

properties:{
columns:{
type:Array,
value:function () {
return ['"CompanyName", "Location", "Address"];
}
},
}

In Angular2

cols=["CompanyName", "City", "Address"];

<my-element columns='{{cols}}'></my-element>

When i try this i get an error: ORIGINAL EXCEPTION: Cannot find a differ supporting object '["CompanyName", "City", "Address"]'

What is the best way to pass arrays and objects to polymer elements?

Project created using angular-cli@webpack would return the following warning when running ng serve.

WARNING in ./~/@vaadin/angular2-polymer/index.js
Cannot find source file 'index.ts': Error: Can't resolve './index.ts' in '/Users/foo/src/learn-vocab/node_modules/@vaadin/angular2-polymer'
 @ ./src/app/app.component.ts 11:0-58
 @ ./src/app/index.ts
 @ ./src/main.ts
 @ multi main

WARNING in ./~/@vaadin/angular2-polymer/src/polymer-element.js
Cannot find source file 'polymer-element.ts': Error: Can't resolve './polymer-element.ts' in '/Users/foo/src/learn-vocab/node_modules/@vaadin/angular2-polymer/src'
 @ ./~/@vaadin/angular2-polymer/index.js 2:24-56
 @ ./src/app/app.component.ts
 @ ./src/app/index.ts
 @ ./src/main.ts
 @ multi main