Ahead of Time (AoT) compile doesn't work with PolymerElement in declarations

[rstpv]

When using PolymerElement function inside the @NgModule, the AoT compiles complains with the following message:

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

@NgModule({
...
declarations: [
 PolymerElement('paper-input') //This is what doesn't work with AoT
],
...
})

Solutions to this error message have been provided in:

angular issue#10789

But almost all use the useFactory attribute as a workaround, but, declarations don't have such a feature.

[DanielGarciaMandillo]

Hello,

Same problem here:

Error: 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

Any solution? Thanks

[asaph26]

It would be really good to know if there is an alternative that will be provided

[mbeckenbach]

I get the same message like @DanielGarciaMandillo
As far as i understood the i18n of ng2, AOT will be required to compile apps with multiple languages.

[dcoblentz]

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.

For instance, write a base class that looks something like this:
export class ChangeEventsAdapterDirective {

protected _eventNameForProperty = (property: string) => `${property}Change`;

constructor(props: string[]) {
    props
        .forEach(property => this[property] = new EventEmitter<any>(false));
}

_emitChangeEvent(property: string, event: any) {
    // Event is a notification for a sub-property when `path` exists and the
    // event.detail.value holds a value for a sub-property.

    // For sub-property changes we don't need to explicitly emit events,
    // since all interested parties are bound to the same object and Angular
    // takes care of updating sub-property bindings on changes.
    if (!event.detail.path) {
        this[this._eventNameForProperty(property)].emit(event.detail.value);
    }
}

}

And then add an implementation for each element, along these lines:

@directive({
selector: 'paper-tabs',
host: {
'(selected-changed)': '_emitChangeEvent("selected", $event)',
'(selected-item-changed)': '_emitChangeEvent("selectedItem", $event)',
'(items-changed)': '_emitChangeEvent("items", $event)',
'(selected-values-changed)': '_emitChangeEvent("selectedValues", $event)',
'(selected-items-changed)': '_emitChangeEvent("selectedItems", $event)'
}
})
export class PaperTabsChangeEventsAdapterDirective extends ChangeEventsAdapterDirective {
@output() selectedChange: any;
@output() selectedItemChange: any;
@output() itemsChange: any;
@output() selectedValuesChange: any;
@output() selectedItemsChange: any;

constructor() {
    super(['selectedChange', 'selectedItemChange', 'itemsChange', 'selectedValuesChange', 'selectedItemsChange']);
}

}

I 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.

[asaph26]

@dcoblentz Had a similar thought but didn't want to go down that route. Awesome work on your part. If this is the only way to achieve this for now, what do you think about creating a separate repo and sharing the definitions that you have and we could collaborate to bring all paperElements into it

[sobvan]

I think AoT is essential with Angular 2.
The 2+ sec parse time (which seems to be 10 sec on a tablet) just really not lives up to the promise of Angular 2.
On the other hand, Material 2 will be soon there where Polymer elements are now (IMHO). So it is a good question if this is worth the effort.
Do you guys think that it is of added value to maintain Polymer Angular 2 bridge in the long term? If so, what are your reasons?

[mbeckenbach]

@istvanszoboszlai

1. AOT is a must have when dealing with i18n in angular2
2. I don't think Material 2 will be comming "soon" when I take a look at their roadmap
3. The Angular Material 1 Datepicker was crap, I don't really trust them for V2.
4. Material 2 has no file upload component in their roadmap
5. Since the first day of Material 1 they promise a grid, but they have never delivered one
6. Their IE support was never really good. Somehow I don't trust them here too.
7. The vaadin web components are awesome. :-)

So yes, please continue this. At least until Material 2 will maybe become mature.

[rstpv]

One thing to note about dcoblentz solution, it does enable two way data binding. But, it will require shadow dom fully enabled if you want to use components with content/slot.
For example, using shady dom, something like:

<paper-input><span suffix>$</span></paper-input>

Won't work, because of the Polymer.dom dependency on web components with shady dom (As far as I saw, it won't be required on Polymer 2 as it uses dom functions directly). Angular2-Polymer solves this with the classes PolymerShadyDomAdapter:
https://github.com/vaadin/angular2-polymer/blob/master/src/polymer-element.ts#L27

Or, have you find any solution that doesn't require that class or shadow dom fully enabled?

[asaph26]

@rstpv I believe we could still continue to use a combination of both. The solution provided by @dcoblentz makes the directive declarations for each component static(which is required for AOT to work). We could still use the PolymerShadyDomAdapter provided by angular2-polymer as it is not directly linked to the creation of the directives but rather sets the Root DOM Adapter.

[dcoblentz]

This is pretty rough, but here's a gist with the code I wrote, it's all pretty rough still, but I copied the output from my browser console to a new ts file, but it would of course be better to turn it into a cli tool that can generate each file directly.

https://gist.github.com/dcoblentz/b16e97bc5671a8c31ab65add8c88b041