Mixing Polymer 1.0 and Angular 1.x

Question

I have an Angular 1.x app, which I am trying to update to material design with the help of Polymer 1.0. I must state that I am only using the paper elements as normal building blocks and that I am not writing any custom Polymer code.

So far, I have encountered 2 problems, both dealing with nested Polymer elements, so I guess the solution will be the same or at least very similar.

---

Problem 1

Using ng-repeat on a paper-item.

HTML code (with Angular templating syntax)

<paper-item data-ng-repeat="event in events">
    <paper-item-body two-line>
        <div>{{event.title}}</div>
        <div secondary>{{event.description}}</div>
    </paper-item-body>
</paper-item>

The following code does not run as it produces the following error:

TypeError: Cannot read property 'childNodes' of undefined
    at g (angular.js:7531)
    at g (angular.js:7531)
    at N (angular.js:8127)
    at g (angular.js:7527)
    at angular.js:7402
    at $get.h (angular.js:7546)
    at m (angular.js:8159)
    at angular.js:27052
    at Object.fn (angular.js:15474)
    at m.$get.m.$digest (angular.js:15609)

However, if I use the following code, the code does run without error:

<div data-ng-repeat="event in events">
    <paper-item-body two-line>
        <div>{{event.title}}</div>
        <div secondary>{{event.description}}</div>
    </paper-item-body>
</div>

Notice that I only changed the root element (from paper-item to div).

---

Problem 2

Trying to use google-map to show a marker on a map. The map centers, but there is no marker.

HTML code (with Angular templating syntax)

<google-map latitude="{{event.y_wgs}}" longitude="{{event.x_wgs}}">
    <google-map-marker latitude="{{event.y_wgs}}" longitude="{{event.x_wgs}}"></google-map-marker>
</google-map>

HTML output (as compiled by Angular at runtime):

<google-map latitude="12.345" longitude="12.345">
    <google-map-marker latitude="NaN" longitude="NaN"></google-map-marker>
</google-map>

Notice the inner tag google-map-marker has NaN as latitude and longitude, while the outer google-map works as intended. This explains why the map centers OK, but no marker is present.

---

TL;DR

Nesting Polymer elements and using Angular double-mustache syntax is probably causing the conflict, as the inner Polymer elements treat it as Polymer code and not Angular code.

Any ideas how to resolve this problem?

Proselytize

Your first problem is likely related to the ShadyDOM shim. When you compose things into Polymer element imperatively, you have to use the Polymer.dom API to satisfy ShadyDOM (which Angular does not). Try running your example on Chrome, but set window.Polymer.dom = true before importing Polymer to see if it works under native Shadow DOM. Also, Polymer will only act on {{ }} syntax in the context of a template it's processing. – Kingkingbird

Thank you for your comment. I am using Chrome, but when I set window.Polymer.dom = true in various locations, nothing happens. Except if I put it after including Polymer elements, then I get multiple error with the following content: Polymer.dom is not a function. – Proselytize

Don't put window.Polymer.dom = true in various places :), only set that before importing Polymer. If it doesn't have any effect, then I don't know what the problem is. – Kingkingbird

I was putting it in various locations because it didn't work. I have tried the following: (1) putting it before anything and got Cannot set property 'dom' of undefined; (2) after webcomponents.js but before polymer.html and got no such error, but it still doesn't work (got the error from the original post); (3) after both webcomponents.js and polymer.html and got the error from my previous comment Polymer.dom is not a function. Overall, it doesn't seem to change anything. – Proselytize

Other than ngMaterial being in early stages (I suspect they're getting close to 1.0), is there any reason not to use it, instead of Polymer? I don't think the Angular and Polymer were designed to be used together. – Reckon

Yes, Angular and Polymer are very similar, but that does not mean they are not ment to be used together. For example, a Polymer developer made this video on the aforementioned topic: Youtube. – Proselytize

See polymer-project.org/1.0/docs/devguide/settings.html It should be: window.Polymer = window.Polymer || {}; window.Polymer.dom = 'shadow'; – Wasting

@JustinFagnani thanks! This solved problem #1. Any ideas why this doesn't work on problem #2. Since there is a bounty on the question, you should make an answer from your comment. – Proselytize

@Proselytize My point is, if you can do it in Angular, why not? Why include an entirely different framework? (sorry if the video covers this, don't have access to sound atm) – Reckon

Answer 1

If your aim is to use Material Design (which for web based apps boils down to using the correct themes), I just saw Angular Material (https://material.angularjs.org/latest/#/). Maybe that would help?

Skidproof

I am currently usin this, but this is old Polymer and I want to migrate to pure Polymer 1.0 as the angular-material lags behind the main development branch of Polymer. – Proselytize

Answer 2

The first problem can be solved by using

window.Polymer = {dom: 'shadow'};

as stated by Justin Fagnani in the comments, with slightly different syntax than stated in the polymer docs, otherwise it will not be recognized in Firefox/IE, see https://github.com/Polymer/polymer/issues/1844

However, I guess that means that you won't get any performance improvements that were introduced with shady DOM.

Outworn