Compiling Dart app to js these two errors arise:
Nº1:
InvalidStateError: Failed to call 'register' on 'Document' for type 'polymer-element': a type with that name is already registered.
Nº2:
Breaking on exception: TypeError: Object #<qE> has no method 'vL'
The object qE is created by dart2js.
How to find the solution?
There are appropriate tools to find the solution?
Thanks for advance !
I heard N1 occurs when Angular and Polymer is used in the same app. This is a known bug.
related open issues:
- duplicate polymer-element registration should not break the app
- Get error "Uncaught InvalidStateError: Failed to call 'register' on 'Document' for type 'polymer-element'
For the N2 use pub build --mode=debug so you get unmangled names and then use one of the available strategies to fix the problem (use of MirrorsUsed, #observable, #reflectable)
Related
If I use caches in my service worker code then Google Closure Compiler (launched with the advanced optimizations mode) will tell me :
/var/www/html/perso/otraSite/web/js/sw_viaTypescript.js:79: ERROR - [JSC_UNDEFINED_VARIABLE] > variable caches is undeclared
})(caches);
^^^^^^
1 error(s), 0 warning(s)
A workaround that I use until now is ... I put window.caches so Google Closure Compiler succeeds to compile but if I let that code, browsers will tell me :
sw.js:18 Uncaught ReferenceError: window is not defined
So I replace window.caches by caches in the code compiled by Google Closure Compiler afterwards but ... having to do this every single time is pretty annoying.
Is there a cleaner way to handle it?
I am trying port to Dart this nice paper-datatable implementation using custom_element_apigen.
Some problems occurred and sought to find solutions according to my understanding (perhaps included more problems!).
However, still an error is thrown and not been able to move on. I need some help about how port to Dart!!! I will briefly describe the steps, errors and solutions that gave and a link to source code of the project test:
1) I following the steps, accord to https://github.com/dart-lang/custom-element-apigen. I had problems on Windows, but I got to resolve after (custom_element_apigen: gives an error importing paper-datatable to Dart)
2) apigen.yaml used with custom_element_apigen does not clear how to configuration.
I used the "trial-and-error" method until no more error occur. It was so:
files_to_generate:
- paper-datatable\paper-datatable.html
- paper-datatable\paper-datatable-column.html
- paper-datatable\paper-datatable-edit-dialog.html
- paper-datatable\paper-datatable-card.html
- paper-datatable\paper-datatable-styles.html
- paper-datatable\datatable-icons.html
files_to_load:
- package:polymer_elements/src/paper-material/paper-material.html
- package:polymer_elements/src/iron-ajax/iron-request.html
- package:polymer_elements/src/iron-ajax/iron-ajax.html
- package:polymer_elements/src/iron-form/iron-form.html
- package:polymer_elements/src/iron-meta/iron-meta.html
- package:polymer_elements/src/iron-icon/iron-icon.html
- package:polymer_elements/src/iron-iconset-svg/iron-iconset-svg.html
- package:polymer_elements/src/paper-ripple/paper-ripple.html
- package:polymer_elements/src/paper-checkbox/paper-checkbox.html
- package:polymer_elements/src/neon-animation/animations/opaque-animation.html
- package:polymer_elements/src/neon-animation/animations/fade-in-animation.html
- package:polymer_elements/src/neon-animation/animations/fade-out-animation.html
- package:polymer_elements/src/paper-tooltip/paper-tooltip.html
- package:polymer_elements/src/iron-resizable-behavior/iron-resizable-behavior.html
- package:polymer_interop/src/js/debug/src/lib/template/templatizer.html
Some paths imports were wrongs on paper-datatable*.(html and dart) files. p.e. : import 'packages\polymer_interop\src\js\debug\src\lib\template\templatizer.dart'; I changed to import 'package:polymer_interop/src/behaviors/templatize.dart';
on paper_datatable_column.dart.
I changed reserved Dart word default to defaultx on get defaultx => jsElement[r'default']; and set defaultx(value) { jsElement[r'default'] = (value is Map || (value is Iterable && value is! JsArray)) ? new JsObject.jsify(value) : value;} instructions on paper_datatable_column.dart and paper_datatable_card.dart;
After the following erros were occuring in several polymer componentes. P.e.: Failed to execute 'registerElement' on 'Document': Registration failed for type 'iron-meta'. A type with that name is already registered.
I changed all paths into paper-datatable*.* files to get official package (pub.dartlang) of the polymer and polymer elements. P.e.: <link rel="import" href="paper_icon_button_nodart.html"> to <link rel="import" href="../../packages/polymer_elements/paper_icon_button_nodart.html">. The register problem does not occur more!
But now, the following problem is occuring and I don't know how to resolve it: On debug console appear the following message: Uncaught SyntaxError: Unexpected token =>. The web app works on browser, but the paper-datatable does not appear.
My complete test project (webstorm) is on https://github.com/supermuka/paper_datatable_port_dart_demo
Is there some wrong in how I used Dart custom_element_apigen (and apigen.yaml)? Did I some things wrong on paths changed? I also need to change some other source?
Thanks!
Most likely you just created a syntax error when editing the files. That being said there are options built in to do most of the things you manually did, and that also makes it easier to update in the future.
omit_imports: This is used on individual items in the files_to_generate section. It can be used to get rid of the templatizer import entirely, resolving issue #3. See example here.
name_substitutions: This is used on individual items in the files_to_generate section, and allows you to rename fields. You can use this to resolve issue #4, example here.
stubs_to_generate: This option allows you to generate stubs which actually import elements from a different package, this should resolve issue #5 you listed above. See example usage here.
Hopefully that helps, and applying those options will just resolve your issues.
My Polymer.dart web app, that works fine in Dartium, is giving the following error (it repeats seven times) when compiled with dart2js using pub build --mode=debug and loaded in Chrome.
Resource interpreted as Script but transferred with MIME type text/plain: "http://confab.dev/index.html_bootstrap.dart". confab.dev/:10
warning: file:///home/dan/projects/confabulous/webatara/web/index.html.0.dart library not found index.html_bootstrap.dart.js:17188
Uncaught Error: NoSuchMethodError: Cannot call "get$functions" on "#<JsLibraryMirror>" (Object #<JsLibraryMirror> has no method 'get$functions') index.html_bootstrap.dart.js:17188
Stack Trace:
TypeError: Object #<JsLibraryMirror> has no method 'get$functions'
at dart._loadLibrary (http://confab.dev/index.html_bootstrap.dart.js:20000:19)
at dart._loadLibraries (http://confab.dev/index.html_bootstrap.dart.js:19917:11)
at dart._initPolymerOptimized (http://confab.dev/index.html_bootstrap.dart.js:19908:7)
at dart.initPolymer (http://confab.dev/index.html_bootstrap.dart.js:19902:7)
at main (http://confab.dev/index.html_bootstrap.dart.js:4112:7)
at _IsolateContext.eval$1 (http://confab.dev/index.html_bootstrap.dart.js:1369:23)
at dart.startRootIsolate (http://confab.dev/index.html_bootstrap.dart.js:1145:21)
at http://confab.dev/index.html_bootstrap.dart.js:26514:7
at init.currentScript (http://confab.dev/index.html_bootstrap.dart.js:26494:5)
at http://confab.dev/index.html_bootstrap.dart.js:26508:3
index.html_bootstrap.dart.js:17188
Uncaught NoSuchMethodError: Cannot call "get$functions" on "#<JsLibraryMirror>" (Object #<JsLibraryMirror> has no method 'get$functions') index.html_bootstrap.dart.js:2369
Because source maps don't appear to work (they're turned on in Chrome, and I have .map files), I don't even know which part of my code is causing this.
I've tried with interop.js included both before dart.js, as the docs say, and after, as this issue says.
Looks like a bug in dart2js. Please file an issue, ideally with a reproducible test-case.
pub upgrade fixed it. It turns out that something had replaced the polymer 0.9.5 that I'd been using with 0.8.10+4. Quite odd. The solution to this is to set the polymer version as '>= 0.9.5' instead of 'any', which I will do eventually, but for now I'm interested to see if it happens again.
I'm trying to figure out which libraries I need to pass to #MirrorsUsed to get my app compiled and working. Sometimes, it's easy to figure out which library may be missing since a descriptive error is thrown such as Uncaught Unsupported operation: Cannot find class for: NgAttr .
Other times, I get a more obscure message, such as NullError: Cannot call "$gt" on null with no clue as to which library I may be omitting. Is there a better approach to this, besides trial and error?
In case you're wondering, this is an angular app and this is how I currently have it configured:
#MirrorsUsed(targets: const[
'angular',
'angular.core',
'angular.core.dom',
'angular.filter',
'angular.perf',
'angular.directive',
'angular.routing',
'angular.core.parser.dynamic_parser',
'angular.core.parser.lexer',
'todo',
'perf_api',
'List',
'NodeTreeSanitizer',
'PlaybackHttpBackendConfig'
],
override: '*')
import 'dart:mirrors';
Use
pub build --mode=debug
this does tree shaking but retains (mostly) the original Dart names.
Then debugging the generated JavaScript usually lets deduce the source of the exception.
EDIT
IMHO these are not necessary anymore, because they were added to #MirrorsUsed in the Angular libs.
'angular',
'angular.core',
'angular.core.dom',
'angular.filter',
'angular.perf',
'angular.directive',
'angular.routing',
'angular.core.parser.dynamic_parser',
'angular.core.parser.lexer',
I try to use angular-ui-bootstrap datepicker and it upset me for a while with an error on firebug console (Firefox 21) saying
Error: array is undefined
indexOf#http://localhost:9000/components/angular/angular.js:526
arrayRemove#http://localhost:9000/components/angular/angular.js:535
JQLiteUnbind#http://localhost:9000/components/angular/angular.js:1630
JQLite.prototype[name]#http://localhost:9000/components/angular/angular.js:2203
.link/<#http://localhost:9000/components/angular-ui-bootstrap-bower/ui-bootstrap-tpls.min.js:1
Scope.prototype.$digest#http://localhost:9000/components/angular/angular.js:7942
Scope.prototype.$apply#http://localhost:9000/components/angular/angular.js:8143
done#http://localhost:9000/components/angular/angular.js:9170
completeRequest#http://localhost:9000/components/angular/angular.js:9333
createHttpBackend/</xhr.onreadystatechange#http://localhost:9000/components/angular/angular.js:9304
http://localhost:9000/components/angular/angular.js
Line 5754
After I check every datepicker settings I check the given example in documentation, followed the link "edit it on plunker" and I got a similar error.
Error: array is undefined
indexOf#http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js:510
arrayRemove#http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js:519
JQLiteUnbind#http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js:1596
JQLite.prototype[name]#http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js:2149
.link/<#http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.5.0.js:1229
Scope.prototype.$digest#http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js:7878
Scope.prototype.$apply#http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js:8079
bootstrap/<#http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js:962
invoke#http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js:2843
bootstrap#http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js:961
angularInit#http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js:936
#http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js:14729
trigger#http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js:1723
createEventHandler/eventHandler/<#http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js:1958
forEach#http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js:133
createEventHandler/eventHandler#http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js:1957
http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js
Line 5687
Then I try Chrome Version 26.0.1410.63 and I got a different error
TypeError: Cannot read property 'indexOf' of undefined
at indexOf (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js:510:12)
at arrayRemove (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js:519:15)
at JQLiteUnbind (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js:1596:7)
at Object.JQLite.(anonymous function) [as unbind] (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js:2149:17)
at Object.fn (http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.5.0.js:1229:21)
at Object.Scope.$digest (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js:7878:27)
at Object.Scope.$apply (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js:8079:24)
at http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js:962:13
at Object.invoke (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js:2843:25)
at bootstrap (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js:960:12)
It works but the error message upset me a lot and I thought that was something wrong with my code.
Can I assume this is not related with example given but with some internals or is the example missing something?
ui-bootstrap 0.5.0 has a bug,
(it tries to unbind 'focus' event handler, but handler doesn't exist)
https://github.com/angular-ui/bootstrap/blob/gh-pages/ui-bootstrap-tpls-0.5.0.js#L1226
you can apply this changes
https://github.com/angular-ui/bootstrap/commit/bf30898da27272df75f6c7ff26545ed16ebf1978
or build it directly from github
or wait for 0.6.0