My little Dart/Polymer sample works nice so far.
(GitHub)
Here is the yaml file I use:
name: PolymerHelloWorld
environment:
sdk: any
dependencies:
browser: any
polymer: any
shadow_dom: any
mdv: any
transformers:
- polymer:
entry_points:
- web/index.html
- web/hello-world/hello-world.html
- web/stopwatch/stopwatch.html
"pub build" produces: (Live again under GH)
From my understanding now I have 2 webcomponents: hello-world and stopwatch
I made a second project, completely independent form PolymerHelloWorld.
Here is the index.html:
I get this error message
pub build
Building PolymerSecondWorld...
[Error from polymer (Linter) on PolymerSecondWorld|web/index.html]:
web/index.html:4:5: absolute paths not allowed: "https://rawgithub.com/MikeMitterer/DART-Sample-PolymerHelloWorld/master/build/hello-world/hello-world.html"
Isn't this the idea of webcomponents? Do I miss something?
[Update]
I added DART-Sample-PolymerElementConsumer to my GH-Repo. It includes the whole polymer stuff... This sample is not a Dart-Sample. It uses polymer to import the component. At least - it tries to...
Here is the HTML it try to run:
https://rawgithub.com/MikeMitterer/DART-Sample-PolymerElementConsumer/master/web/index.html
Codeview:
https://raw.github.com/MikeMitterer/DART-Sample-PolymerElementConsumer/master/web/index.html
The HTML-Page shows no error message - nothing. Just the headline but nothing from the webcomponent.
If you want to import Polymer elements they have to be in a Dart package (e.g pub.dartlang.org).
You add the package to you pubspec.yaml to import the package into your project and
then you can import the elements/components from the packages directory.
Polymer is also very delicate about the import paths within a Dart project
and something like you tried definitively won't work
(this could work in JavaScript though)
but this would require to execute code (included within the loaded component) loaded at runtime
which Dart doesn't support yet. All code has to be available at compile time.
Some discussions about this topic:
trouble importing components using href="package:..."
should HTML Imports support package: scheme?
How can I import a custom element in both HTML and Dart? (workaround included)
improve canonicalization issues with html-imports involving packages
EDIT
I looked at your code and tried to understand your comment and extended my answer accordingly.
To be able to import components from a package the components have to be in the lib directory of the package you want to import.
The web page using (importing) elements has to be a Dart project (package) which imports the component package in 'pubspec.yaml'. For the web application (index.html, ...) web is the correct directory within the package.
Related
I understand how to import one dart-polymer package into another package and use a component from the imported package.
There seems to be a difference in angular2-dart.
I created an angular2-dart component in package A and import it into package B.
The specific component I want to use is NameComponent.
In polymer I would simply do the following to used the imported component's markup
<name-component></name-component>
Doing something similar does not work in angular2-dart.
I have not been able to find information on importing a component from one dart package into another for angular2-dart.
A graphical summary of what I am trying to do is shown below - package B. The name-component is from package A.
Does anyone know how this is done?
EDIT 1
After making the suggested corrections I receive the following
"P:\Program Files\Dart\dev\dart-sdk\bin\pub.bat" serve web --port=57435
Loading source assets...
Loading angular2 and dart_to_js_script_rewriter transformers...
Serving epimss_ng2_app web on http://localhost:57435
[DirectiveProcessor on epimss_ng2_reg|lib/components.dart]:
ERROR: Invalid argument (url): "Could not read asset at uri asset:epimss_ng2_reg/lib/name_component.html"
[Warning from TemplateCompiler on epimss_ng2_app|lib/app_component.ng_meta.json]:
Could not find Directive entry for name: NameComponent
. Please be aware that Dart transformers have limited support for reusable, pre-defined lists of Directives (aka "directive aliases"). See https://goo.gl/d8XPt0 for details.
Build completed with 1 errors.
[web] GET Served 13 assets.
[web] GET packages/epimss_ng2_reg/components.dart => Could not find asset epimss_ng2_reg|lib/components.dart.
[web] GET Served 17 assets.
I am going to place the components directory directly on lib and see if it makes a difference.
My package is actually packages/epimss_ng2_reg/src/components.dart.
I can only think of 2 things you might be missing.
You need to add the component to directives
#Component(..., directives: const [NameComponent]) af the parent component.
You need to add the Angular2 transformer in pubspec.yaml of the component
transformers:
angular2
Running into an weird issue when I use Angular 2.0 Dart. Basically I'm trying to use Router and using pub serve to transform it to JS using the angular transformer. However I get the following error
Cannot find reflection information on RouteRegistry
at dart.wrapException (http://localhost:8080/main.dart.js:2834:17)
at NoReflectionCapabilities.dart.NoReflectionCapabilities.factory$1 (http://localhost:8080/main.dart.js:31991:17)
at Reflector.dart.Reflector.factory$1 (http://localhost:8080/main.dart.js:15565:46)
at Binding.dart.Binding.resolve$0 (http://localhost:8080/main.dart.js:13499:41)
at dart.resolveBindings (http://localhost:8080/main.dart.js:13766:90)
at dart.Injector.static.Injector_resolve (http://localhost:8080/main.dart.js:13898:63)
at bootstrap_closure.dart.bootstrap_closure.call$0 (http://localhost:8080/main.dart.js:9374:37)
at dart._rootRun (http://localhost:8080/main.dart.js:20637:16)
at _ZoneDelegate.dart._ZoneDelegate.run$2 (http://localhost:8080/main.dart.js:22730:41)
at NgZone.dart.NgZone._run$4 (http://localhost:8080/main.dart.js:5098:24)
But removing the transformer
- angular2:
entry_points: web/main.dart
I can see my app and navigate through the routes properly, however the downside is that my Dart2JS file is now 2.8megs
Currently as of Alpha 28, this is not supported. Alpha 30 will have this fixed.
https://github.com/angular/angular/issues/1950
You could add "mirror_mode: verbose" to the angular2 transformer.
Does RouteRegistry come from a different package? If so make sure the angular transformer has also been added to that package (it doesn't have to specify any entry points). The new angular transformer works a lot differently than the old one and it is required on all packages, not just the application package.
** This question is edited and cleaned up some **
I have two projects and I want to use code from one in the other; I seem to be having trouble putting the code in the right directory structure to make the import statements work.
Both projects are created and managed exclusively from the Dart Editor on a Mac, if that makes any differences.
Project Directory Structures
Project 1: a command line app which contains the code I want to share in the following directory structure:
/dart/command_line_app
/lib
shared_library.dart
/bin
command_line_app.dart
Project 2: a web app which wants to import the code in shared_libary.dart
/dart/web_application
/packages
/web
web_application.dart
In the file shared_libary.dart, I declare it to be a library can create a simple class that provides output when instantiated:
library shared_library;
class ShareMe
{
ShareMe()
{
print("Hello, ShareMe");
}
}
This compiles, and works inside the command_line project: command_line_app.dart has the following:
import 'package:command_line_app/shared_library.dart';
void main() {
ShareMe shareMe = new ShareMe();
print("Hello, World!");
}
This imports the code runs, printing both "Hello Share Me," and Hello World.
THE PROBLEM
I want to instantiate the ShareMe class inside web_application.dart. I'd thought I could do that by putting in the same import statement I put in my command_line code:
import 'package:command_line_app/shared_library.dart';
But, when I put the same import into the web_appliation, it gets the error
Target of URI does not exist 'package:command_line_app/shared_library.dart'
Other Things I've Tried
I was certain I'd solved the problem when I cntrl-Clicked properties on Web_application and selected Project References.
It brings up a window allowing me to select command_line_app with a check box, but when I do, I get an error:
Could not set the project description for 'web_application' because the project description file (.project) is out of sync with the file system.
Whatever that means.
When I cntrl-click the underlined error and try Quick Fix it offers me "resolve dependencies" which sounds promising, but after a few seconds, it comes back and informs me that
Pub get failed, [1] Resolving dependencies... (15.3s)
Could not find package command_line_app at https://pub.dartlang.org.
Depended on by:
- web_application 0.0.0
I hope this is clear-er and gives a better insight into both what I'm trying to do and what I'm missing.
EDIT
you need to add
dependencies:
command_line_app:
path: ../command_line_app
to your dependencies in web_application/pubspec.yaml.
EDIT END
When you want to make code reusable in different packages, you should put that code into the lib directory of that package and import it using import 'package:mypackage/myfile.dart';.
Another problem you may face is, that browser applications can't import packages that have a dart:io dependency. If you want to reuse code between command line and browser applications you should move them into the lib directory of another package my_shared_code where you put only code that doesn't depend on dart:io (for example some entity classes) and import this code from both app packages (browser and command line).
I have the demo code for the Rikulo UXL ScrollView demo working with the Dart Editor.
UXL Overview
However, the set-up seems cumbersome to me. For the example to build the .Dart file from the UXL file, (apparently) it needs to be named as: "ScrollView.uxl.xml". Can the build process or Dart Editor be configured and set-up to do a more streamlined workflow like:
ScrollView.uxl --> ScrollView.dart
As opposed to the current rule:
ScrollView.uxl.xml --> ScrollView.uxl.dart
It seem to me the solution seems to lie in the UXL builder:
import 'package:rikulo_uxl/uc.dart';
Solutions welcome.
The readme of the package seems to contain exactly the code you are looking for:
https://github.com/rikulo/uxl
add this to your build.dart file (in the directory where your pubspec.yaml file is
import 'package:rikulo_uxl/uc.dart' show build;
void main(List<String> arguments) {
build(arguments);
}
I have a dart web application using polymer. I can successfully run it with Dartium using boot.js. However, my index.html file is actually a Django template in another git repo for the project. Its uses template inheritance, among other things, so its not just a normal HTML file.
My goal is to have a Makefile compile the project on request. Currently, pub deploy will compile all the code, and it will run in non-dart browsers. However, my custom polymer elements do not end up being registered. They all show up as blank. Is this kind of setup even possible, that is, to not have an index.html entry point and build custom polymer elements? I could create a dummy buid.html to satisfy the entry-point requirement, but this seems like a sub-optimal solution.
My current buid.dart looks like:
import 'dart:io';
import 'package:polymer/component_build.dart';
import 'package:polymer/deploy.dart' as deploy;
main() {
build(new Options().arguments, [])
.then((_) => deploy.main());
}
and the output:
'package:polymer/component_build.dart': Error: line 68 pos 29: \
ambiguous reference: 'JSON' is defined in library 'dart:convert' \
and also in 'dart:io'
var message = JSON.encode([jsonMessage]);
The only way is to provide some HTML file as entry point. It doesn't matter when you use another HTML file in production if it contains the necessary script tags.