Uncaught DOMException: Failed to execute 'setAttribute' on 'Element': '|layers|' is not a valid attribute name.

[mikeelemuel]

Versions
ember-cli: 2.16
ember-leaflet: 3.0.17

Below are the following code of my template.hbs

  <LeafletMap lat={{lat}} lng={{lng}} zoom={{zoom}} as |foo|>
    <foo.tile url="https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png"/>
  </LeafletMap>

and my controller.js is

import Ember from 'ember'

export default Ember.Component.extend({
  lat: 45.519743,
  lng: -122.680522,
  zoom: 10
});

But the approach above returned a error called Uncaught DOMException: Failed to execute 'setAttribute' on 'Element': '|layers|' is not a valid attribute name.

[miguelcobain]

Your version of ember does not support angle bracket invocation syntax.

That's why you get the error.

To use this feature on old ember versions, there is a polyfill: https://github.com/rwjblue/ember-angle-bracket-invocation-polyfill

Try installing that ember addon and it should work.