I made the below simple code while learning AngularDART Component, but nothing is displayed, can anyone help me knowing what mistake I made:
my html main file:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="bootstrap.css">
<link rel="stylesheet" href="main.css">
<title>AngularDART training</title>
<script type="application/dart" src="main.dart"></script>
<script src="packages/browser/dart.js"></script>
</head>
<body ng-app>
<h1 id='text_id'>Welcome</h1>
<the-component></the-component>
</body>
</html>
the main.dart file is:
import 'package:angular/angular.dart';
import 'package:angular/application_factory.dart';
#Component(
selector: 'the-component',
templateUrl: 'angularComponent.html',
cssUrl: 'angularComponent.css',
publishAs: 'cmp')
class myComponent {var name = 'Component';}
main() {
var module = new Module()
..bind(myComponent);
applicationFactory().addModule(module).run();
}
the angularComponent.html file is:
<p>This is the angular: {{cmp.name}}</p>
the <the-component></the-component> is not working, and not displaying anything!
thanks
Angular transformer picks the components from the lib folder. If you place your component's files (.dart, .html, .css) in other folders (i.e. web), you need to specify them in the transformers section of pubspec.yaml.
For example,
transformers
- angular:
-html_files:
- absolute/path/to/your/html
Hope this works for you.
Thanks for all who tried to help, the solution was writing the pubspec.yaml as:
dependencies:
angular: '>=0.12.0 <0.13.0'
transformers:
- angular: {html_files: "web/angularComponent.html"}
Thanks.
The bug is that your pubspec.yaml doesn't list angularComponent.html as an asset.
The Angular transformer which creates the StaticClosureMap did not parse the template, never saw the cmp.name expression and never generated a getter.
We should have given you a better error message. If you still have the complete project isolated well, please file a bug on the Github project and we can make this experience better.
Related
so my Polymer.Dart project is running fine in Chromium (running on Dart code) but when I pub upgrade and pub build the sampler-scaffold keeps working but paper-button, paper-dialog, paper-progress... elements are just not showing up!
My HTML file looks like this
<link href='http://fonts.googleapis.com/css?family=Droid+Serif|Open+Sans:400,700' rel='stylesheet' type='text/css'>
<link rel="import" href="packages/paper_elements/paper_button.html">
<link rel="import" href="packages/paper_elements/paper_dialog_transition.html">
<link rel="import" href="packages/paper_elements/paper_dialog.html">
<link rel="stylesheet" href="css/reset.css"> <!-- CSS reset -->
<link rel="stylesheet" href="css/style.css"> <!-- Resource style -->
...
<paper-button id="infoUPC" class="cd-read-more" raised>Read more</paper-button>
...
<script src="education.dart" type="application/dart"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/main.js"></script> <!-- Resource jQuery -->
<script src="js/modernizr.js"></script> <!-- Modernizr -->
education.dart
import 'package:polymer/polymer.dart';
import 'dart:html';
import 'package:paper_elements/paper_dialog.dart';
main() {
initPolymer().run(() {
Polymer.onReady.then((_) {
querySelector('#infoFHV').onClick.listen(
(_) => toggleDialog('fhv'));
querySelector('#infoUPC').onClick.listen(
(_) => toggleDialog('upc'));
querySelector('#infoTU').onClick.listen(
(_) => toggleDialog('tu'));
});
});
}
toggleDialog(language) =>
(querySelector('paper-dialog[edu=$language]') as PaperDialog)
.toggle();
pubspec.yaml
name: polydart_resume
version: 0.0.1
author: Shady
description: Test app
dependencies:
core_elements: '>=0.3.2 <0.5.0'
custom_element_apigen: ">= 0.1.1 <0.2.0"
polymer: ">=0.14.0 <0.16.0"
web_components: ">=0.9.0 <0.10.0"
paper_elements: ">=0.5.0 <0.6.0"
transformers:
- polymer:
entry_points:
- web/index.html
pub build does not give me any warnings or errors on these files, but I'm surely missing something right?
You have two entry pages index.html and languages.html. Only languages.html calls your custom main() but only index.html is in your pubspec.yaml transformer configuration.
index.html will invoke the default main() method provided by Polymer but not your custom main() because of this script tag
<script type="application/dart">export 'package:polymer/init.dart';</script>
languages.html has the correct script tag
<script type="application/dart" src="languages.dart"></script>
but this doesn't work as expected because languages.html is not listed in your Polymer transformer entry_points configuration
transformers:
- polymer:
entry_points:
# - web/index.html
- web/languages.html
From the comments:
Q: Do you load languages.html from a link in drawer.html (<core-item label="Languages" url="chapters/languages.html"></core-item>)? – Günter Zöchbauer 25 mins ago
A: Yessir thats exactly what I'm doing.
This isn't how one usually develops applications in Dart. You can, but Dart is for SPA (http://en.wikipedia.org/wiki/Single-page_application).
If you load another page from a Dart application this is like launching an entirly different application. Each page (app) loaded this way needs all parts of a Polymer application to work.
Usually in Dart you have only one entry page (entry_point) and when you want to change what is shown to the user (a new view) you replace the content in the current page instead of loading another one (this is for example where Polymer elements are handy for, you just remove one element (view) and add another one).
Dart also has a rather large boilerplate code size which has to be loaded each time you load another page which is rather inefficient.
Because my problem was not really code related but more fundamental, I found a sample project on www.polymer-project.org where one can see a recommended routing method. I find the introduction docs on polymer don't cover this topic good enough...
I am using Dart SDK 1.5.3 | polymer 0.11.0+5 | Windows x64. When I create a created a polymer application using the template 'Sample web application using the polymer library (mobile friendly) option' and run the application it works as expected with the counter incrementing when the button is clicked.
Assuming the page with the
<script type="application/dart">
export 'package:polymer/init.dart';
</script>
is index.html, attempting to refactor the application by removing the following lines from index.html
<click-counter count="5"></click-counter>
<link rel="import" href="clickcounter.html">
results in the following error:
Exception: NoSuchMethodError: method not found: 'whenPolymerReady'
Receiver: Instance of 'JsFunction'
Arguments: [Closure: () => dynamic] (package:polymer/src/loader.dart:115)
Breaking on exception: NoSuchMethodError: method not found: 'whenPolymerReady'
I have used the mechanism all the time in creating any polymer app, but has never seen such exception although I have seen documentation on the web involving Dart https://www.google.com.jm/url?sa=t&rct=j&q=&esrc=s&source=web&cd=1&cad=rja&uact=8&ved=0CBwQFjAA&url=http%3A%2F%2Fcode.google.com%2Fp%2Fdart%2Fissues%2Fdetail%3Fid%3D19161&ei=MZq8U_nlK42KyASBkYHgCw&usg=AFQjCNHOc6MD-mhzPbDOmg8Hp5NeqVufqQ&bvm=bv.70138588,d.aWw
The documentation suggested that this problem had resolved but it certainly is present in the current polymer I am using.
Each of your components (each file containing a <polymer-element> tag) must import polymer.html.
Make sure your clickcounter.html contains the line:
<link rel="import" href="packages/polymer/polymer.html" />
at the top. (It was breaking change in 0.11).
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.
My dummy application created from the polymer template starts fine, but once I move the clickcounter to another directory, I start getting this error (I have updated references accordingly). My new folder structure is the following:
/lib
/src
/test
clickcounter.dart
clickcounter.html
/web
polytest.html
This is how the modified line looks:
<link rel="import" href="../lib/src/test/clickcounter.html">
I think I found the solution.
The clickcounter.html |imports link rel="import" href="packages/polymer/polymer.html|". In the entry-point file, there is no such import. When a component is imported into the entry-point, it seems that the polymer.html condition is satisfied. In the absence of a component the import has to placed directly in the file.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sample app</title>
<!-- <script src="packages/web_components/platform.js"></script>
not necessary anymore with Polymer > 0.14.0 -->
<script src="packages/web_components/dart_support.js"></script>
<link rel="import" href="packages/polymer/polymer.html">
<script type="application/dart">export 'package:polymer/init.dart';</script>
<script src="packages/browser/dart.js"></script>
<link rel="stylesheet" href="epimss_material_design.css">
</head>
<body>
<h1>Epimss material design</h1>
<p>Hello world from Dart!</p>
<div id="sample_container_id">
</div>
</body>
</html>
After that everything worked fine.
The same problem actually resurfaced in Dart SDK 1.6.0-dev.1.2 and was similarly solved. Still, I cannot say if its a bug or not. It simply works by adding this import. I suppose if a legitimate component is used that imports would allow the removal of the same import from the entry-point file. One of Dart or Dart-polymer expert might be able to explain what actually is happening. Looking forward to the in-depth explanation since this is the first time I have observed this issue.
I just ran into the same issue.
Are you sure your polymer imports are underneath your javascript imports?
<!-- <script src="packages/web_components/platform.js"></script>
not necessary anymore with Polymer 0.14.0 -->
<script src="packages/web_components/dart_support.js"></script>
<!-- import the click-counter -->
<link rel="import" href="clickcounter.html">
instead of:
<!-- import the click-counter -->
<link rel="import" href="clickcounter.html">
<script src="packages/web_components/platform.js"></script>
<script src="packages/web_components/dart_support.js"></script>
I'm not in that development, but it seems like your problem is API or dependencies used in application.
I think your transformer settings is missing the entry page
transformers:
- polymer:
entry_points:
- example/index.html
Otherwise look closely at the output if there is any other warning or error that points to the root causel
I've just had exactly the same issue. It looked like the code stopped working without any change performed by me.
Root cause of the issue was, that there appeared a new version of polymer package.
So you should probably play with dependencies in your pubspec.yaml. I just explicitly changed the version of Polymer to some older one.
I have a dart package that contains three extensions of polymer element: tp-element-a, tp-element-b and tp-element-c. For each of these elements there is a html-file containing the markup of the element and a dart file for the code. The tp-element-c contains references to the tp-element-a and tp-element-b.
The package structure looks like this:
testpolymer
pubspec.yaml
- packages
- asset
tp-element-a.html
tp-element-b.html
tp-element-c.html
- lib
testpolymer.dart
tp-element-a.dart
tp-element-b.dart
tp-element-c.dart
- web
index.html
The definitiopn of the polymer elements are very simple:
tp-element-a.html
<polymer-element name="tp-element-a">
<template>
<h1>Hello Element A</h1>
</template>
<script type="application/dart" src="../lib/tp-element-a.dart"></script>
</polymer-element>
tp-element-a.dart
part of testpolymer;
#CustomTag("tp-element-a")
class TpElementA extends PolymerElement {
TpElementA.created() : super.created() {}
}
I skip the definitions of tp-element-b and tp-element-c. They are similar. With the only difference that tp-element-c uses the tp-element-a and tp-element-b within its template markup.
The file testpolymer.dart contains the definition of the library testpolymer:
library testpolymer;
import "package:polymer/polymer.dart";
part "tp-element-a.dart";
part "tp-element-b.dart";
part "tp-element-c.dart";
In the yaml file I decalre the dependency to the polymer package and add the polymer transformer:
name: testpolymer
description: A pub package
dependencies:
polymer: any
transformers:
- polymer:
entry_points: web/index.html
Last not least the index.html just contains the link to the tp-element-c.html and uses this element:
<html>
<head>
<link rel="import" href="../asset/tp-element-c.html">
<script type="application/dart">export 'package:polymer/init.dart';</script>
<script src="packages/browser/dart.js"></script>
</head>
<body>
<div id="sample_container_id">
<tp-element-c></tp-element-c>
</div>
</body>
</html>
So far so good. But when I run a pub build I get errors, that are probably all caused by organizing the dart files in a library:
packages/testpolymer/tp-element-a.dart:1:1:
Directive not allowed here.
part of testpolymer;
packages/testpolymer/tp-element-a.dart:4:26:
A class can't extend a malformed type.
Try correcting the malformed type annotation or removing the 'extends' clause.
class TpElementA extends PolymerElement {
packages/testpolymer/tp-element-a.dart:3:2:
Cannot resolve 'CustomTag'.
#CustomTag("tp-element-a")
So how is it possible to include the code for polymer elements in libraries?
If I don't organize the polymer code as a library, I get another error in tp-element-c.dart, which imports (if no library is used) the tp-element-a.dart and the tp-element-b.dart directly:
The imported libraries 'tp-element-a.dart' and 'tp-element-b.dart' should not have the same name ''
How can I resolve this puzzle?
You get the last error message, if you don't have in each dart file unique library uniquename; definitions. In your case names could be: tp-element-a, tp-element-b etc.
Latest edit:
This is an open issue in web-ui: https://github.com/dart-lang/web-ui/issues/245
Previously:
I'm trying to figure out how to get removed() from the web component lifecycle methods to be called. Looking through the generated code for my below example, I see there's a call to autogenerated.dispatch(); after replaceElement() which I hoped would be what calls removed(), but I don't see my print statement output.
Maybe related: I glanced through the spec trying to understand what the output of build.dart is doing for the lifecycle methods. Perhaps the spec is out of date? I still don't see composeChildren() listed in the instantiation section of the spec (which is mentioned in this web-ui issue comment) even though composeChildren() gets called in the autogenerated code from build.dart.
The reason behind this question is my interest in a Dart webapp able to load and unload web components within a single parent html file programmatically (via the instantiation instructions in the spec), instead of having to declare web components in the html. I'm running with web_ui-0.2.11. Thanks!
webcomponent:
<!DOCTYPE html>
<html><body>
<element name="x-lifecycle-test" constructor="LifecycleTest" extends="div">
<template> {{foo}} </template>
<script type="application/dart">
import 'dart:html';
import 'package:web_ui/web_ui.dart';
var foo = "testing lifecycle methods";
class LifecycleTest extends WebComponent{
inserted() => print("inserted");
removed() => print("removed");
}
</script>
</element>
</body></html>
Parent html file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"><title>Lifecycle</title>
<link rel="components" href="lifecycle_test.html">
</head>
<body>
<div>
<button on-click="replaceElement()">replace element</button>
</div>
<div id='holder'>
<x-lifecycle-test></x-lifecycle-test>
</div>
<script type="application/dart">
import 'dart:html';
void replaceElement() {
query('#holder').replaceWith(new DivElement()
..id = 'holder'
..text = 'replaced');
}
main() {}
</script>
<script type='text/javascript' src="https://dart.googlecode.com/svn/branches/bleeding_edge/dart/client/dart.js"></script>
</body>
</html>
Adding an answer here for completeness: web components are used in Dart using Polymer. When an instance of a custom element is removed from the DOM, the leftView life cycle method triggers. You can read more about this at https://www.dartlang.org/docs/tutorials/polymer-intro/#life-cycle-methods.
I've been following the Dart web-ui codelab. When I embed dart source code inside a web component .html file, I'm not getting any static analysis or autocomplete support in the Dart Editor (there's an open bug for this http://code.google.com/p/dart/issues/detail?id=7449 ). Hence, I'm looking for a temporary workaround by using the src attribute.
According to the spec, the src attribute is supported for web components in Dart:
https://www.dartlang.org/articles/dart-web-components/spec.html#behavior. I tried linking to an external Dart library: given a foo.html web component for
<element name="x-foo-component" constructor="FooComponent" extends="div">
I'd like to link to a separate foo_embed.dart file in the same directory as my web component, which defines FooComponent, by adding:
<script type="application/dart" src="foo_embed.dart"></script>
within foo.html. Following the spec's suggestions, foo_embed.dart needs to be a Dart library, and would contain:
library foo_embed;
import 'package:web_ui/web_ui.dart';
class FooComponent extends WebComponent {
...
}
When I try this, running build.dart (from these instructions http://www.dartlang.org/articles/dart-web-components/tools.html) ends up only putting foo_embed.dart in out/ and there's no out/foo.html.dart generated for importing in application.dart.
As expected, pasting the contents of foo_embed.dart as an inline script inside foo.html directly (as done in the codelab) works with build.dart, and I can launch my webapp in Dartium, so I don't seem to have any other syntax problems in my project.
Do I probably have a simple syntax mistake somewhere? Or is this a temporary limitation of the Dart web components compiler? Thanks.
I can't reproduce your problem.
This works for me:
lib/foo.dart
library foo;
import 'package:web_ui/web_ui.dart';
class FooComponent extends WebComponent {
var foo = 'asddfg';
}
lib/foo.html
<element name="x-foo" constructor="FooComponent" extends="div">
<template>
<input value="{{ foo }}" />
</template>
<script type="application/dart" src="foo.dart"></script>
</element>
example/test.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="components" href="packages/foo/foo.html" />
</head>
<body>
<x-foo></x-foo>
<script type="application/dart">main() {}</script>
<script type="text/javascript" src="https://dart.googlecode.com/svn/branches/bleeding_edge/dart/client/dart.js"></script>
</body>
</html>
Then I open up Dartium and go to .../example/out/test.html and I see an input with the data bound to it properly.