3
votes

I asked a question earlier about getting a version of angular and polymer that would play nice with each other. Now I'm having some trouble running it in both dartium and chrome. My code is the same as the in the previous question. When this is done, I'm gonna write up a blogpost on how to get a material design app up and running in dart and update it as they break things. sigh. thanks again for the help

Dartium output:

warning: file:///packages/polymer/polymer.html not found.
warning: file:///packages/paper_elements/paper_tabs.html not found.
warning: file:///packages/paper_elements/paper_tab.html not found.
warning: file:///packages/core_elements/core_header_panel.html not found.
warning: file:///packages/core_elements/core_toolbar.html not found.
Exception: NoSuchMethodError: method not found: 'whenPolymerReady'
Receiver: Instance of 'JsFunction'
Arguments: [Closure: () => dynamic]

Chrome output:

No getter for '$'.

STACKTRACE:
Error
    at dart.b (file:///index.html_bootstrap.dart.js:1296:3)
    at bL.DA (file:///index.html_bootstrap.dart.js:4940:20)
    at IP.XK (file:///index.html_bootstrap.dart.js:4093:5)
    at am.XT (file:///index.html_bootstrap.dart.js:4273:32)
    at am.FP (file:///index.html_bootstrap.dart.js:4263:38)
    at am.Ic (file:///index.html_bootstrap.dart.js:4245:8)
    at am.Oe (file:///index.html_bootstrap.dart.js:4243:18)
    at am.cq (file:///index.html_bootstrap.dart.js:4234:8)
    at am.nT (file:///index.html_bootstrap.dart.js:4229:8)
    at am.PB (file:///index.html_bootstrap.dart.js:4222:8)
3
This is kind of aggravating. This is just a skeleton of my app. No business logic is included, but yet I can't get it out of the parking lot. Dart is no where as is to use as its marketedMarc Byfield
I understand your frustration but you should not confuse Dart with some GUI frameworks and widget libraries. Angular.dart and Polymer.js/Polymer.dart are in experimental state, not even beta. core-elements and paper-elements are something like developer preview. Dart works quite good and is stable but these frameworks and libraries are under heavy development. You can't expect using them is foolproof and easy for everyone trying the first steps with Dart. I'll look into this issue. The error message is familiar.Günter Zöchbauer
It's very weird. I could reproduce your error many times and played around with changes to locate the cause. Then I got another error from Angular and since then I'm not able to reproduce your error.Günter Zöchbauer

3 Answers

2
votes

Adding the list of files in angular transformer and placing it after polymer's transformer worked out. Here's the commit with changes. I was able to run it successfully in Dartium and Chrome with pub serve.

0
votes

I'm aware that this is not an answer but I can't post this error output using a comment.

Below my error output of your 2. error. I got it also when I run in Dartium after I couldn't reproduce the 1. error anymore.

It seems Angular is somehow processing code of the paper-elements. The error I now get is:

No getter for '$'.

STACKTRACE:
#0      StaticClosureMap.lookupGetter (package:angular/core/parser/parser_static.dart:15:25)
#1      DynamicParserBackend.newAccessScope (package:angular/core/parser/dynamic_parser.dart:108:38)
#2      DynamicParserImpl.parseAccessOrCallScope (package:angular/core/parser/dynamic_parser_impl.dart:257:67)
#3      DynamicParserImpl.parsePrimary (package:angular/core/parser/dynamic_parser_impl.dart:239:36)
#4      DynamicParserImpl.parseAccessOrCallMember (package:angular/core/parser/dynamic_parser_impl.dart:193:30)
#5      DynamicParserImpl.parsePrefix (package:angular/core/parser/dynamic_parser_impl.dart:188:37)
#6      DynamicParserImpl.parseMultiplicative (package:angular/core/parser/dynamic_parser_impl.dart:163:29)
#7      DynamicParserImpl.parseAdditive (package:angular/core/parser/dynamic_parser_impl.dart:149:37)
#8      DynamicParserImpl.parseRelational (package:angular/core/parser/dynamic_parser_impl.dart:131:31)
#9      DynamicParserImpl.parseEquality (package:angular/core/parser/dynamic_parser_impl.dart:117:33)
#10     DynamicParserImpl.parseLogicalAnd (package:angular/core/parser/dynamic_parser_impl.dart:108:31)
#11     DynamicParserImpl.parseLogicalOr (package:angular/core/parser/dynamic_parser_impl.dart:99:33)
#12     DynamicParserImpl.parseConditional (package:angular/core/parser/dynamic_parser_impl.dart:83:32)
#13     DynamicParserImpl.parseExpression (package:angular/core/parser/dynamic_parser_impl.dart:68:34)
#14     DynamicParserImpl.parseFormatter (package:angular/core/parser/dynamic_parser_impl.dart:53:33)
#15     DynamicParserImpl.parsePrimary (package:angular/core/parser/dynamic_parser_impl.dart:220:34)
#16     DynamicParserImpl.parseAccessOrCallMember (package:angular/core/parser/dynamic_parser_impl.dart:193:30)
#17     DynamicParserImpl.parsePrefix (package:angular/core/parser/dynamic_parser_impl.dart:188:37)
#18     DynamicParserImpl.parseMultiplicative (package:angular/core/parser/dynamic_parser_impl.dart:163:29)
#19     DynamicParserImpl.parseAdditive (package:angular/core/parser/dynamic_parser_impl.dart:152:67)
#20     DynamicParserImpl.parseRelational (package:angular/core/parser/dynamic_parser_impl.dart:131:31)
#21     DynamicParserImpl.parseEquality (package:angular/core/parser/dynamic_parser_impl.dart:117:33)
#22     DynamicParserImpl.parseLogicalAnd (package:angular/core/parser/dynamic_parser_impl.dart:108:31)
#23     DynamicParserImpl.parseLogicalOr (package:angular/core/parser/dynamic_parser_impl.dart:99:33)
#24     DynamicParserImpl.parseConditional (package:angular/core/parser/dynamic_parser_impl.dart:83:32)
#25     DynamicParserImpl.parseExpression (package:angular/core/parser/dynamic_parser_impl.dart:68:34)
#26     DynamicParserImpl.parseFormatter (package:angular/core/parser/dynamic_parser_impl.dart:53:33)
#27     DynamicParserImpl.parseChain (package:angular/core/parser/dynamic_parser_impl.dart:35:32)
#28     DynamicParser._parse (package:angular/core/parser/dynamic_parser.dart:36:46)
#29     DynamicParser.call.<anonymous closure> (package:angular/core/parser/dynamic_parser.dart:31:50)
#30     _HashMap.putIfAbsent (dart:collection-patch/collection_patch.dart:124)
#31     DynamicParser.call (package:angular/core/parser/dynamic_parser.dart:31:30)
#32     _AstParser.call (package:angular/core/scope.dart:1063:24)
#33     Scope.watch (package:angular/core/scope.dart:242:35)
#34     TextMustache.TextMustache (package:angular/core_dom/mustache.dart:15:16)
#35     ElementBinder._createDirectiveFactories.<anonymous closure> (package:angular/core_dom/element_binder.dart:244:20)
#36     FactoryProvider.get (package:di/src/provider.dart:49:15)
#37     BaseInjector.getInstanceByKey (package:di/src/base_injector.dart:117:29)
#38     BaseInjector.getByKey (package:di/src/base_injector.dart:162:23)
#39     ElementBinder._link.<anonymous closure> (package:angular/core_dom/element_binder.dart:206:44)
#40     List.forEach (dart:core-patch/growable_array.dart:228)
#41     ElementBinder._link (package:angular/core_dom/element_binder.dart:205:33)
#42     ElementBinder.bind (package:angular/core_dom/element_binder.dart:324:10)
#43     TaggingViewFactory._bindTagged (package:angular/core_dom/tagging_view_factory.dart:43:31)
#44     TaggingViewFactory._link (package:angular/core_dom/tagging_view_factory.dart:76:22)
#45     TaggingViewFactory.call (package:angular/core_dom/tagging_view_factory.dart:22:12)
#46     Application.run.<anonymous closure>.<anonymous closure> (package:angular/application.dart:172:22)
#47     _rootRunUnary (dart:async/zone.dart:842)
#48     _ZoneDelegate.runUnary (dart:async/zone.dart:466)
#49     _onRunUnary.<anonymous closure> (package:angular/core/zone.dart:113:63)
#50     VmTurnZone._onRunBase (package:angular/core/zone.dart:97:16)
#51     _onRunUnary (package:angular/core/zone.dart:113:17)
#52     _CustomZone.runUnary (dart:async/zone.dart:748)
#53     _Future._propagateToListeners.handleValueCallback (dart:async/future_impl.dart:488)
#54     _Future._propagateToListeners (dart:async/future_impl.dart:571)
#55     _Future._completeWithValue (dart:async/future_impl.dart:331)
#56     _Future._asyncComplete.<anonymous closure> (dart:async/future_impl.dart:393)
#57     _rootRun (dart:async/zone.dart:835)
#58     _ZoneDelegate.run (dart:async/zone.dart:459)
#59     _onScheduleMicrotask.<anonymous closure> (package:angular/core/zone.dart:117:43)
#60     VmTurnZone._finishTurn (package:angular/core/zone.dart:143:34)
#61     VmTurnZone._onRunBase (package:angular/core/zone.dart:104:43)
#62     _onRun (package:angular/core/zone.dart:109:17)
#63     _CustomZone.run (dart:async/zone.dart:740)
#64     VmTurnZone.run (package:angular/core/zone.dart:221:40)
#65     Application.run (package:angular/application.dart:164:20)
#66     main.<anonymous closure>.<anonymous closure> (http://localhost:8080/Application.dart:26:14)
#67     _RootZone.runUnary (dart:async/zone.dart:1088)
#68     _Future._propagateToListeners.handleValueCallback (dart:async/future_impl.dart:488)
#69     _Future._propagateToListeners (dart:async/future_impl.dart:571)
#70     _Future._completeWithValue (dart:async/future_impl.dart:331)
#71     _Future._asyncComplete.<anonymous closure> (dart:async/future_impl.dart:393)
#72     _asyncRunCallbackLoop (dart:async/schedule_microtask.dart:23)
#73     _asyncRunCallback (dart:async/schedule_microtask.dart:32)
#74     _handleMutation (dart:html:38347)

The input field at #3 has the value

"\n\n    Polymer('core-selector', {\n\n      /**\n       * Gets or sets the selected element.  Default to use the index\n       * of the item element.\n       *\n       * If you want a specific attribute value of the element to be\n       * used instead of index, set \"valueattr\" to that attribute name.\n       *\n       * Example:\n       *\n       *     <core-selector valueattr=\"label\" selected=\"foo\">\n       *       <div label=\"foo\"></div>\n       *       <div label=\"bar\"></div>\n       *       <div label=\"zot\"></div>\n       *     </core-selector>\n       *\n       * In multi-selection this should be an array of values.\n       *\n       * Example:\n       *\n       *     <core-selector id=\"selector\" valueattr=\"label\" multi>\n       *       <div label=\"foo\"></div>\n       *       <div label=\"bar\"></div>\n       *       <div label=\"zot\"></div>\n       *     </core-selector>\n       *\n       *     this.$.selector.selected = ['foo', 'zot'];\n       *\n       * @attribute selected\n       * @type Object\n       * @default null\n       */\n      selected: null,\n\n      /**\n       * If true, multiple selections are allowed.\n       *\n       * @attribute multi\n       * @type boolean\n       * @default false\n       */\n      multi: false,\n\n      /**\n       * Specifies the attribute to be used for \"selected\" attribute.\n       *\n       * @attribute valueattr\n       * @type string\n       * @default 'name'\n       */\n      valueattr: 'name',\n\n      /**\n       * Specifies the CSS class to be used to add to the selected element.\n       * \n       * @attribute selectedClass\n       * @type string\n       * @default 'core-selected'\n       */\n      selectedClass: 'core-selected',\n\n      /**\n       * Specifies the property to be used to set on the selected element\n       * to indicate its active state.\n       *\n       * @attribute selectedProperty\n       * @type string\n       * @default ''\n       */\n      selectedProperty: '',\n\n      /**\n       * Specifies the attribute to set on the selected element to indicate\n       * its active state.\n       *\n       * @attribute selectedAttribute\n       * @type string\n       * @default 'active'\n       */\n      selectedAttribute: 'active',\n\n      /**\n       * Returns the currently selected element. In multi-selection this returns\n       * an array of selected elements.\n       * \n       * @attribute selectedItem\n       * @type Object\n       * @default null\n       */\n      selectedItem: null,\n\n      /**\n       * In single selection, this returns the model associated with the\n       * selected element.\n       * \n       * @attribute selectedModel\n       * @type Object\n       * @default null\n       */\n      selectedModel: null,\n\n      /**\n       * In single selection, this returns the selected index.\n       *\n       * @attribute selectedIndex\n       * @type number\n       * @default -1\n       */\n      selectedIndex: -1,\n\n      /**\n       * The target element that contains items.  If this is not set \n       * core-selector is the container.\n       * \n       * @attribute target\n       * @type Object\n       * @default null\n       */\n      target: null,\n\n      /**\n       * This can be used to query nodes from the target node to be used for \n       * selection items.  Note this only works if the 'target' property is set.\n       *\n       * Example:\n       *\n       *     <core-selector target=\""+($.myForm|stringify)+"\" itemsSelector=\"input[type=radio]\"></core-selector>\n       *     <form id=\"myForm\">\n       *       <label><input type=\"radio\" name=\"color\" value=\"red\"> Red</label> <br>\n       *       <label><input type=\"radio\" name=\"color\" value=\"green\"> Green</label> <br>\n       *       <label><input type=\"radio\" name=\"color\" value=\"blue\"> Blue</label> <br>\n       *       <p>color = "+(color|stringify)+"</p>\n       *     </form>\n       * \n       * @attribute itemSelector\n       * @type string\n       * @default ''\n       */\n      itemsSelector: '',\n\n      /**\n       * The event that would be fired from the item element to indicate\n       * it is being selected.\n       *\n       * @attribute activateEvent\n       * @type string\n       * @default 'tap'\n       */\n      activateEvent: 'tap',\n\n      /**\n       * Set this to true to disallow changing the selection via the\n       * `activateEvent`.\n       *\n       * @attribute notap\n       * @type boolean\n       * @default false\n       */\n      notap: false,\n\n      ready: function() {\n        this.activateListener = this.activateHandler.bind(this);\n        this.observer = new MutationObserver(this.updateSelected.bind(this));\n        if (!this.target) {\n          this.target = this;\n        }\n      },\n\n      get items() {\n        if (!this.target) {\n          return [];\n        }\n        var nodes = this.target !== this ? (this.itemsSelector ? \n            this.target.querySelectorAll(this.itemsSelector) : \n                this.target.children) : this.$.items.getDistributedNodes();\n        return Array.prototype.filter.call(nodes || [], function(n) {\n          return n && n.localName !== 'template';\n        });\n      },\n\n      targetChanged: function(old) {\n        if (old) {\n          this.removeListener(old);\n          this.observer.disconnect();\n          this.clearSelection();\n        }\n        if (this.target) {\n          this.addListener(this.target);\n          this.observer.observe(this.target, {childList: true});\n          this.updateSelected();\n        }\n      },\n\n      addListener: function(node) {\n        node.addEventListener(this.activateEvent, this.activateListener);\n      },\n\n      removeListener: function(node) {\n        node.removeEventListener(this.activateEvent, this.activateListener);\n      },\n\n      get selection() {\n        return this.$.selection.getSelection();\n      },\n\n      selectedChanged: function() {\n        this.updateSelected();\n      },\n\n      updateSelected: function() {\n        this.validateSelected();\n        if (this.multi) {\n          this.clearSelection();\n          this.selected && this.selected.forEach(function(s) {\n            this.valueToSelection(s);\n          }, this);\n        } else {\n          this.valueToSelection(this.selected);\n        }\n      },\n\n      validateSelected: function() {\n        // convert to an array for multi-selection\n        if (this.multi && !Array.isArray(this.selected) && \n            this.selected !== null && this.selected !== undefined) {\n          this.selected = [this.selected];\n        }\n      },\n\n      clearSelection: function() {\n        if (this.multi) {\n          this.selection.slice().forEach(function(s) {\n            this.$.selection.setItemSelected(s, false);\n          }, this);\n        } else {\n          this.$.selection.setItemSelected(this.selection, false);\n        }\n        this.selectedItem = null;\n        this.$.selection.clear();\n      },\n\n      valueToSelection: function(value) {\n        var item = (value === null || value === undefined) ? \n            null : this.items[this.valueToIndex(value)];\n        this.$.selection.select(item);\n      },\n\n      updateSelectedItem: function() {\n        this.selectedItem = this.selection;\n      },\n\n      selectedItemChanged: function() {\n        if (this.selectedItem) {\n          var t = this.selectedItem.templateInstance;\n          this.selectedModel = t ? t.model : undefined;\n        } else {\n          this.selectedModel = null;\n        }\n        this.selectedIndex = this.selectedItem ? \n            parseInt(this.valueToIndex(this.selected)) : -1;\n      },\n\n      valueToIndex: function(value) {\n        // find an item with value == value and return it's index\n        for (var i=0, items=this.items, c; (c=items[i]); i++) {\n          if (this.valueForNode(c) == value) {\n            return i;\n          }\n        }\n        // if no item found, the value itself is probably the index\n        return value;\n      },\n\n      valueForNode: function(node) {\n        return node[this.valueattr] || node.getAttribute(this.valueattr);\n      },\n\n      // events fired from <core-selection> object\n      selectionSelect: function(e, detail) {\n        this.updateSelectedItem();\n        if (detail.item) {\n          this.applySelection(detail.item, detail.isSelected);\n        }\n      },\n\n      applySelection: function(item, isSelected) {\n        if (this.selectedClass) {\n          item.classList.toggle(this.selectedClass, isSelected);\n        }\n        if (this.selectedProperty) {\n          item[this.selectedProperty] = isSelected;\n        }\n        if (this.selectedAttribute && item.setAttribute) {\n          if (isSelected) {\n            item.setAttribute(this.selectedAttribute, '');\n          } else {\n            item.removeAttribute(this.selectedAttribute);\n          }\n        }\n      },\n\n      // event fired from host\n      activateHandler: function(e) {\n        if (!this.notap) {\n          var i = this.findDistributedTarget(e.target, this.items);\n          if (i >= 0) {\n            var item = this.items[i];\n            var s = this.valueForNode(item) || i;\n            if (this.multi) {\n              if (this.selected) {\n                this.addRemoveSelected(s);\n              } else {\n                this.selected = [s];\n              }\n            } else {\n              this.selected = s;\n            }\n            this.asyncFire('core-activate', {item: item});\n          }\n        }\n      },\n\n      addRemoveSelected: function(value) {\n        var i = this.selected.indexOf(value);\n        if (i >= 0) {\n          this.selected.splice(i, 1);\n        } else {\n          this.selected.push(value);\n        }\n        this.valueToSelection(value);\n      },\n\n      findDistributedTarget: function(target, nodes) {\n        // fi...

I guess you should create a bug report in the Angular.dart repository.

I filed an issue in the Angular.dart GitHub repo https://github.com/angular/angular.dart/issues/1227

0
votes

I'm clueless about these things, but for me I seemed to solve it by moving the following code:

<!-- after the Polymer elements imports -->
<script type="application/dart">export 'package:polymer/init.dart';</script>    
<script async src="packages/browser/dart.js"></script>

from the end of the <head>er, to just before the </body>. Only my index.html now contains these lines. Lastly I also moved my custom element import above core-elements/paper-elements imports.

I only have one transformer in pubspec.yaml.