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.
Related
I've created an ASP.NET MVC Core 2 application with an Angular 6 front-end. When it works, it works, but when I make an error in some template code, for instance creating an empty span in app.component:
<span />
Everything will compile and Angular will run, but it will remain stuck on the basic "loading" page defined in index.html. There's no error anywhere in the browser's developer tools, and none in Visual Studio's various output windows. As soon as I fix the offending tag:
<span></span>
and save the document, the page reloads and everything works.
Where are errors like these reported so that I can find them?
Try running the ng build --prod command this will give you a more exact location of where errors are.
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 copied the navbar default sample from from the samples but without any changes it appears to be doing what I think is mobile format. The only thing I see is the brand tag to the left and the button to the right. My monitor is pretty big so it can handle the menu and it does when I view it online which you can visually see here. I can only assume that since I cut and paste from the demo code I have a setting somewhere else that is wrong but I have no idea where to look. I did make sure to run nuget and get the latest version of the code so I should match what is on the demo. Any ideas?
Update
The issue appears to be with VS2012 and debug mode. Using Visual Studio Development Server seems to be the problem. If I publish locally it works as expected. I thought it might be IE8 but realized it was VS2012 after I published the site.
Is there a way to work around this while using the debugger in VS2012?
Update 2
And somehow it is not working in IE8 again even after being published. Chrome seems to work fine. Must be something picky about IE8 that I need to code around.
Try to copy all the page html, then if it works cut unnecessary code.
Use this instead of your local bootstrap:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
Looks like this was an issue with IE8 all along. I didn't think it was a browser issue so I never looked for IE8 nav problems but here is a link that documents the issue.
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
I created a new Phonegap 2.5 project from scratch, and I've been trying to load an external URL in it, but I keep getting input boxes popping up on startup before loading the actual URL. I first get a pop-up with the URL of the website, then in the input box it says "DeviceInfo","Device652321624". If I click Cancel, it pops up 2 more times before loading the website. On the website itself, it loads some relative URLs, but others cause the entire page to refresh and the input boxes to pop up again.
I set the URL by setting <content src="http://phonegap.example.com" />, which is just a regular website with Javascript. I even tried commenting out all Phonegap specific code (no more ondeviceready calls), but it still causes the problem. http://www.google.com loads for me, so I'm not sure what else to check. And it works with the Android version that I've developed.
If it helps, I've also seen this message in the XCode log: Resetting plugins due to page load.
I've had the exact same problem today.
I fixed it by checking the include of the cordova.js file (this js is generated when you create the project using the create command.
( called cordova.js in the renamed cordova project version. probably phonegap.js in phonegap ?)
anyway my include was :
<script type="text/javascript" src="js/cordova.js"></script>
whereas je js file was in the project root :
I changed it to
<script type="text/javascript" src="cordova.js"></script>
and every things is fine now.
also, the 'create' command for Android generate a different js file. make sur that the new one generated for ios is used.
hope that helps !
Problem is you are using android's cordova.js instead of ios's cordova.js.
Just make sure you are using the proper one.