{"action":"created","issue":{"url":"https://api.github.com/repos/vaadin/angular2-polymer/issues/86","repository_url":"https://api.github.com/repos/vaadin/angular2-polymer","labels_url":"https://api.github.com/repos/vaadin/angular2-polymer/issues/86/labels{/name}","comments_url":"https://api.github.com/repos/vaadin/angular2-polymer/issues/86/comments","events_url":"https://api.github.com/repos/vaadin/angular2-polymer/issues/86/events","html_url":"https://github.com/vaadin/angular2-polymer/issues/86","id":176538525,"number":86,"title":"Ahead of Time (AoT) compile doesn't work with PolymerElement in declarations","user":{"login":"rstpv","id":13932397,"avatar_url":"https://avatars.githubusercontent.com/u/13932397?v=3","gravatar_id":"","url":"https://api.github.com/users/rstpv","html_url":"https://github.com/rstpv","followers_url":"https://api.github.com/users/rstpv/followers","following_url":"https://api.github.com/users/rstpv/following{/other_user}","gists_url":"https://api.github.com/users/rstpv/gists{/gist_id}","starred_url":"https://api.github.com/users/rstpv/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/rstpv/subscriptions","organizations_url":"https://api.github.com/users/rstpv/orgs","repos_url":"https://api.github.com/users/rstpv/repos","events_url":"https://api.github.com/users/rstpv/events{/privacy}","received_events_url":"https://api.github.com/users/rstpv/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":4,"created_at":"2016-09-13T03:18:01Z","updated_at":"2016-10-21T14:53:27Z","closed_at":null,"body":"When using PolymerElement function inside the @NgModule, the AoT compiles complains with the following message:\r\n\r\n> 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\r\n\r\n\r\n```\r\n@NgModule({\r\n...\r\ndeclarations: [\r\n PolymerElement('paper-input') //This is what doesn't work with AoT\r\n],\r\n...\r\n})\r\n```\r\n\r\nSolutions to this error message have been provided in:\r\n\r\n[angular issue#10789](https://github.com/angular/angular/issues/10789#issuecomment-242220591)\r\n\r\nBut almost all use the useFactory attribute as a workaround, but, declarations don't have such a feature.\r\n"},"comment":{"url":"https://api.github.com/repos/vaadin/angular2-polymer/issues/comments/255398864","html_url":"https://github.com/vaadin/angular2-polymer/issues/86#issuecomment-255398864","issue_url":"https://api.github.com/repos/vaadin/angular2-polymer/issues/86","id":255398864,"user":{"login":"dcoblentz","id":4762129,"avatar_url":"https://avatars.githubusercontent.com/u/4762129?v=3","gravatar_id":"","url":"https://api.github.com/users/dcoblentz","html_url":"https://github.com/dcoblentz","followers_url":"https://api.github.com/users/dcoblentz/followers","following_url":"https://api.github.com/users/dcoblentz/following{/other_user}","gists_url":"https://api.github.com/users/dcoblentz/gists{/gist_id}","starred_url":"https://api.github.com/users/dcoblentz/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/dcoblentz/subscriptions","organizations_url":"https://api.github.com/users/dcoblentz/orgs","repos_url":"https://api.github.com/users/dcoblentz/repos","events_url":"https://api.github.com/users/dcoblentz/events{/privacy}","received_events_url":"https://api.github.com/users/dcoblentz/received_events","type":"User","site_admin":false},"created_at":"2016-10-21T14:53:26Z","updated_at":"2016-10-21T14:53:26Z","body":"I spent the last couple of days playing with this, and the only way that I could come up with was to generate source code for each element ahead of time. \r\n\r\nFor instance, write a base class that looks something like this:\r\nexport class ChangeEventsAdapterDirective {\r\n\r\n    protected _eventNameForProperty = (property: string) => `${property}Change`;\r\n\r\n    constructor(props: string[]) {\r\n        props\r\n            .forEach(property => this[property] = new EventEmitter<any>(false));\r\n    }\r\n\r\n    _emitChangeEvent(property: string, event: any) {\r\n        // Event is a notification for a sub-property when `path` exists and the\r\n        // event.detail.value holds a value for a sub-property.\r\n\r\n        // For sub-property changes we don't need to explicitly emit events,\r\n        // since all interested parties are bound to the same object and Angular\r\n        // takes care of updating sub-property bindings on changes.\r\n        if (!event.detail.path) {\r\n            this[this._eventNameForProperty(property)].emit(event.detail.value);\r\n        }\r\n    }\r\n}\r\n\r\nAnd then add an implementation for each element, along these lines:\r\n\r\n@Directive({\r\n    selector: 'paper-tabs',\r\n    host: {\r\n    '(selected-changed)': '_emitChangeEvent(\"selected\", $event)',\r\n    '(selected-item-changed)': '_emitChangeEvent(\"selectedItem\", $event)',\r\n    '(items-changed)': '_emitChangeEvent(\"items\", $event)',\r\n    '(selected-values-changed)': '_emitChangeEvent(\"selectedValues\", $event)',\r\n    '(selected-items-changed)': '_emitChangeEvent(\"selectedItems\", $event)'\r\n    }\r\n})\r\nexport class PaperTabsChangeEventsAdapterDirective extends ChangeEventsAdapterDirective {\r\n    @Output() selectedChange: any;\r\n    @Output() selectedItemChange: any;\r\n    @Output() itemsChange: any;\r\n    @Output() selectedValuesChange: any;\r\n    @Output() selectedItemsChange: any;\r\n\r\n    constructor() {\r\n        super(['selectedChange', 'selectedItemChange', 'itemsChange', 'selectedValuesChange', 'selectedItemsChange']);\r\n    }\r\n}\r\n\r\nI did this for all of the elements in my project, and they all seem to work, but it's definitely a hassle. I don't know of a cleaner way to manage it at this point though."}}
{"actor":{"display_login":"dcoblentz"}}