I am doing polymer dart. Everything works fine with dart vm but when I try to deploy it, it fails (compilation was okay.) When I run the built js version. It gave me the error
Uncaught TypeError: Cannot call method 'shL' of null
I tried to trace the compiled js code, and it seems like due to query an element that is not yet in the document (it is in the html file but somehow only the head of the document is loaded at that time.)
Since it's the compiled version, it's really hard to trace which part went wrong. Also, there's no error in dart vm and dart2js.
Does anyone know why this is happening or I did something wrong?
PS. I think to make dart more popular, at least dart2js compiler has to be as stable as whenever the code runs fine on vm is fine in the js version. Having developer try to debug on the compiled js code is really annoying.
Thanks,
Yi
==UPDATE==
Here is the html file (before being built)
<html>
<head>
<meta charset="utf-8">
<title>Sample app</title>
<link rel="stylesheet" href="myHtml.css">
<link rel="import" href="template/my-element.html">
<script type="application/dart">export 'main.dart';</script>
<script src="packages/browser/dart.js"></script>
</head>
<body>
<my-element id="myElement" class="myElement" numOfRow="3"></my-element>
</body>
</html>
Usually this problem is caused by polymer expressions accessing properties which are dropped by pub builds tree-shaking.
Tree-shaking retains all code that is referenced somewhere but polymer expressions are not considered for this yet.
If your project works when you run build with option debug pub build --mode=debug then it's very probably that this is the cause.
If the dropped field/method is in code you control then you can solve this by just adding one of the annotations #reflectable, #observable, or #published.
If its third party code (SDK or some 3rd-party library) you can import 'dart:mirrors' and annotate it with#MirrorsUsed(options)` where the options list the members tree-shaking should retain.
I found that there were two issues in my original code.
1. I shouldn't load the main script before the body is loaded which I think it's also wrong in some of the sample codes in the dart page.
2. I think initPolymer() doesn't init the elements synchronously. Therefore, if I call a method of the element right after the initPolymer, it cannot find the method.
I fixed 1. However, I don't know how to fix 2. I tried initPolymer().run(), it doesn't work either. Please let me know if someone knows how to fix it.
Thanks,
Yi
Related
We have an application written entirely dart/polymer with quite a few polymer components. We use the custom tags in out index.html and compile to dart with pub build. The compile to javascript creates index.html of 24K lines. Original index.html is 150. The application works perfectly.
However we would like to distribute the code to third party sites so that they also can use the components with custom tags. Ideally by just linking to an already compiled script and simple using our custom tags in their pages.
I know this is possible without polymer. Question is does polymer support this? Is it possible to compile a polymer app and keep to a minimum amount of changes in the html file?
To reduce the problem to an example:
We would like our customers to be able to do some thing like this, without the use of dart sdk:
<head>
<script src="what_ever_required.js"></script>
<script src="our_application.js"></script>
</head>
<body>
<our-custom-tag></our-customer-tag>
<p>What ever else content</p>
</body>
Regards
That's currently not supported.
Currently an application that used Dart code needs to be compiled to JS as a whole at once. There is no way to build parts of a Dart application and compose an application from them later.
With the upcoming DDC (Dart Development Compiler) there might be a way to accomplish that. An experimental approach is https://pub.dartlang.org/packages/polymerize
I am trying to build a react native app for production on iOS device.
In this project I am loading a local html page. Currently I am using the WebView component.
<WebView source={{require('./webapp/index.html')}}/>
And below is webapp/index.html.
<!DOCTYPE html>
<html>
<head>
<title>Foo</title>
</head>
<body>
<h1>Hello World</h1>
<script src="js/script.js" type="text/javascript">
</script>
</body>
</html>
I am building for production by following the steps listed here: https://facebook.github.io/react-native/docs/running-on-device-ios.html#building-your-app-for-production (v0.34)
How can I make sure that index.html is able to load js/script.js?
Most likely we need own server.I was looking for this also and I haven't found any relevant answer to this question too.
I have react-native-webview-bridge hereit seems that now is right inside react-native core but i doubt we can use allowFileAccessFromFileURLs... i will update this answer if i find out something else
I personally use a tool like inliner to insert all the file contents (you might need the dot in your path strings) in my html automatically and then use the html string in my app.
I import my html string in a way that works well for ios and android by implementing this with the current versions of the libraries mentioned.
I am building a client/server app in Dart using Angular for the front-end and Shelf on the backend. When I do a pub build it generates the javascript for the Dart files as expected but is does not replace the dart references in my HTML files. So in my index.html I have the following script reference:
<script type="application/dart" src="main.dart"></script>
This makes my application not load correctly. If I manually change it to
<script src="main.dart.js"></script>
My application works as expected. My question is, is there a way to configure my pub build to do this automatically? Or are dart files references not supposed to be replaced with JS references? If so, how do I build a basic server?
I know this produces an error message in the browser console but never experienced any problems because of this.
I haven't used it myself yet but I think this transformer https://pub.dartlang.org/packages/dart_to_js_script_rewriter does what you want.
I have created a polymer project. It generates a default app which reverses text entered into an input field. This works.
Then I tried to add a core-header-panel. I copied the code from the description page into the index.html file of the project:
<body unresolved fullbleed layout vertical>
<core-header-panel flex>
<core-toolbar>
<div>Hello World!</div>
</core-toolbar>
</core-header-panel>
<main-app>
</main-app>
<script type="application/dart">export 'package:polymer/init.dart';</script>
</body>
This gets me 3 warnings on the displayed web page. Two say:
Custom element found in document body without an "unresolved"
attribute on it or one of its parents.
I have inserted an unresolved attribute after the body tag. I do not understand why the error does not go away.
The third messages is:
custom element with name core-toolbar not found
I added a line
<link rel="import" href="packages/core_elements/core_toolbar.html">
but the error message did not go away.
Finally I outcommented the complete core-header-panel and nevertheless the page in Dartium still shows "Hello world" and all the error messages.
I'm lost here. The DART editor / Dartium "development system" seems to be useless. I can not even test the simplest things. What am I doing wrong? How do you work with this system???
BTW: I get exactly the same behaviour when I try to run this as Javascript in Firefox browser ...
You need to add an import for core-toolbar and core-header-panel.
You also need to add a dependency to the pubspec.yaml file.
dependencies:
core_elements: any
Otherwise I can't see anything wrong.
If this doesn't work, please try to run pub cache repair in your project directory (from command line).
If this still doesn't work please add the complete content of your pubspec.yaml, pubspec.lock and index.html to your question.
Meanwhile I found a solution by accident. The problem was that whatever I changed in the sources the DART editor always transfered the initial errornous file to the browser, or at least this is what it looks like.
The problem disappeared when I switched to another polymer project which I had used as an initial tutorial project, run that one and went back to the above project. Suddenly the browsers were able to display the changed files.
Looks for me like an ugly bug in the DART editor.
I have a JQuery mobile app. I now want to deploy it natively to Android and iOS. To assist with this, I thought I would use PhoneGap. When I run my app, none of the styling information appears. There are no errors in the console window. I'm not sure what I'm doing wrong.
Are there any guides on going from JQuery mobile to phone gap? Everything I see starts with Phone Gap and builds from there. Am I doing this in reverse?
Thank you for any insistence. I really want to get this app onto Android and iOS. I feel like I'm so close. But I have no idea what I'm doing wrong.
Thank you,
This is just a guess, but you have something like this in your code?
<link rel="stylesheet" href="//code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
If so that's wrong and you need to store your css locally in the assets folder if you want it to run locally within your WebView.
Otherwise, I'd suggest that you first run an 'hello world' on phone gap, and style just one element through an external local stylesheet (without worry about javascript for now). That's essentially the most difficult part, knowing where to put the file and how to reference it, so you do not want to confuse yourself with the extraneous code of your current project when you're learning that part.
Once you've figured that part out, it will be trivial for you to do the same with the jQuery Mobile library, both the css one and the js one.
Have you include properly?
<link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.1.0.min.css" />
<script src="jquery.mobile/jquery-1.7.2.min"></script>
<script src="jquery.mobile/jquery.mobile-1.1.0.min.js"></script>
<script type="text/javascript" charset="utf-8" src="cordova-1.5.0.js"></script>
put the .js file and .css file in the jquery.mobile folder.
But if you are using eclipse then you can create phonegap app directly.
I hope it would be helpful for you.