Angular Polymer converts all my angular components to <template-anchor>

[yobud]

Hi !

Thank you for your work! It's correctly working with polymer elements, but when I use this module, it seems that its also trying to use my own angular2 components, and all of them are converted to <template-anchor>.

I tried to disable "schemas: [CUSTOM_ELEMENTS_SCHEMA]" in my module but Polymer module does not work anymore. Did I miss something or is it due to the WIP status of your project ?

EDIT: It seems to only replace elements that have no children (like p, div...), but no problem with custom components if they have children.

BTW, I'll also like to know if this module would work with ngModel/ngControl/ngFormControl directives ? This would be awesome and making it very usable!

Thank you for your answers,

Best regards,

Jérémy

[platosha]

Hi, thanks a lot for trying and giving feedback.

First of all, CUSTOM_ELEMENTS_SCHEMA is something that should be always on when you use Polymer elements (any Web Components, in general). Otherwise the Angular template compiler will, most probably, give you errors of incorrect template HTML.

Basically, <template-anchor> is a template anchor, the same as <!-- template bindings={} --> comment nodes you’ve probably seen before. It is normal to see them in the DOM, it is not a bad symptom per se. Angular does template anchors when it needs to remember a place to insert content into, for example, for ngIf directives with false expression.

Could you, please, compare this behaviour with how Angular works with empty elements by default? If they are also taken out, then, I suppose, it is not an issue of this module.

Speaking about ngModel/ngControl/ngFormControl, I would like to add them, but will concentrate on providing basic DOM compatibility and data binding support first.

[yobud]

Hi and thank you for your answer,

In fact, these <template-anchor> replaces content that is shown if I disable Polymer module (it's a ngSwitchCase that allows or not rendering these dom elements).

That's why I guess this bug is related to Polymer module.

Btw I tried to use native polymer modules without any module (this one or vaadin's one), and this seems to work (and it's possible to bind events to update formControls of webComponents). e.g :

<paper-slider name="plop" [ngModel]="test" (value-change)="test=$event.target.value" editable ngDefaultControl></paper-slider>

This works as expected. So, is your bundle aiming to abstract value-change and ngDefaultControl stuff ?

I'm new with webComponents and I'm here trying to know what are the pros and cons to use dedicated module to work with angular.

It seems the most important con of native webComponents is that they require to work with shadow DOM and this make older browsers really slow with polyfills. Is this what you're trying to improve through this module ?

Thank you very much for your work and your answers.

[synarque]

@ZeBigDuck see https://github.com/vaadin/angular2-polymer/issues/104

[yobud]

Thank your for your answer @synarque.

Ok then the intent is not to use anymore shadow dom, and that's a great thing for overriding templates purpose (as css /deep/ is deprecated).

But the issue with template-anchor is still remaining. I tried to solve it but I'm pretty confused with renderer stuff...

[platosha]

@ZeBigDuck can you provide a reproduction in a separate project or in plunkr? I was unable to reproduce the missing empty elements myself: the empty elements ended up in the dom, just like expected.

[yobud]

@platosha I'll try to do a plunkr this week.