material Design with Angular Dart and Polymer dart

2019-08-05 17:56发布

站内问答 / 前沿技术
1912 2 4

I am at my whits end here. I've been trying over the last 48 hours to get these technologies to work.I've read everywhere that they should be able to work but it's just one problem after the other. I've tried various combinations of my pubspeck.yaml file but the results I get are either the code simply wont build, or it just doesn't work >.>

I'll appreciate any help I can get!

my pubspeck.yaml:

name: blah
dependencies:
angular: 0.12.0
  angular_node_bind: any
  shadow_dom: any
  browser: any
  polymer: ">=0.11.0 <0.12.0"
  core_elements: ">=0.0.6 <0.1.0"
  paper_elements: any
transformers:
- angular
- polymer:
    entry_points:
        - web/index.html
dependency_overrides:
  polymer: ">= 0.11.1-dev < 0.12.0"
  browser: any
  web_components: 0.4.0
  analyzer: ">=0.15.6 <0.16.0"
  html5lib: ">=0.11.0 <0.12.0"

My dart file:

import 'package:polymer/polymer.dart';
import 'package:angular/angular.dart';
import 'package:angular/application_factory.dart';
import 'package:angular_node_bind/angular_node_bind.dart';

// HACK until we fix code gen size. This doesn't really fix it,
// just makes it better.
@MirrorsUsed(override: '*')
import 'dart:mirrors';

void main() {
  initPolymer().run(() {
    applicationFactory().addModule(new AppModule()).addMdoule(new NodeBindModule()).run();
  });
}

and finally my html:

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>GTHR</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

        <!-- Optional theme -->
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">

        <link href="css/screen.css" media="screen, projection" rel="stylesheet" type="text/css" />

        <script src="js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script>

        <!-- <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/paper_elements/paper_tabs.html">
        <link rel="import" href="packages/paper_elements/paper_tab.html">
        <link rel="import" href="packages/core_elements/core_header_panel.html">
        <link rel="import" href="packages/core_elements/core_toolbar.html">
        <script type="application/dart" src="Application.dart"></script>
        <script src="packages/browser/dart.js"></script>
    </head>
    <body fullbleed layout vertical>
        <!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->

        <core-header-panel mode="waterfall">
            <div class="core-header">
                My App
            </div>
            <div>
                <core-toolbar>
                    <paper-tabs selected="0" role="tablist">
                        <paper-tab>World</paper-tab>
                        <paper-tab>Followers</paper-tab>
                        <paper-tab>Mine</paper-tab>
                    </paper-tabs>
                </core-toolbar>
            </div>
        </core-header-panel>

        <div class="main-container">
            <div class="main wrapper clearfix">
            </div> <!-- #main -->
        </div> <!-- #main-container -->

        <div class="footer-container">
            <footer class="wrapper">
                <h3>footer</h3>
            </footer>
        </div>

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.0.min.js"><\/script>')</script>

        <!-- Latest compiled and minified JavaScript -->
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
        <script src="packages/shadow_dom/shadow_dom.debug.js"></script>

        <script src="js/flowtype.js"></script>
        <script src="js/main.js"></script>

        <!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
        <script>
            (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
            function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
            e=o.createElement(i);r=o.getElementsByTagName(i)[0];
            e.src='http://www.google-analytics.com/analytics.js';
            r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
            ga('create','UA-XXXXX-X');ga('send','pageview');
        </script>
    </body>
</html>

with my the following as is, Dart2js gives me the following output:

With the pubspeck.yaml I get the following output:

Loading source assets... 
Loading smoke/src/default_transformer transformers... 
Loading di transformers... (1.7s)
Loading observe transformers... 
Loading angular transformers... 
Loading polymer/src/build/mirrors_remover transformers... 
Loading polymer transformers... 
Loading polymer transformers... 
Loading polymer transformers... (1.0s)
Building gthr-web... (14.1s)
[Info from Dart2JS]:
Compiling gthr-web|web/Application_static_expressions.dart...
[Error from Dart2JS]:
web/Application_static_expressions.dart:1:13:
Expected ';', but got '-'.
library gthr-web.web.Application.generated_expressions;
            ^
[Info from Dart2JS]:
Took 0:00:00.519007 to compile gthr-web|web/Application_static_expressions.dart.
[Info from Dart2JS]:
Compiling gthr-web|web/Application.dart...
[Error from Dart2JS on gthr-web|web/Application.dart]:
web/Application_static_expressions.dart:1:13:
Expected ';', but got '-'.
library gthr-web.web.Application.generated_expressions;
            ^
[Info from Dart2JS]:
Took 0:00:00.591015 to compile gthr-web|web/Application.dart.
[Info from Dart2JS]:
Compiling gthr-web|web/Application_static_injector.dart...
[Error from Dart2JS]:
web/Application_static_injector.dart:1:13:
Expected ';', but got '-'.
library gthr-web.web.Application.generated_static_injector;
            ^
[Info from Dart2JS]:
Took 0:00:00.501912 to compile gthr-web|web/Application_static_injector.dart.
[Info from Dart2JS]:
Compiling gthr-web|web/Application_static_metadata.dart...
[Error from Dart2JS]:
web/Application_static_metadata.dart:1:13:
Expected ';', but got '-'.
library gthr-web.web.Application.generated_metadata;
            ^
[Info from Dart2JS]:
Took 0:00:00.151240 to compile gthr-web|web/Application_static_metadata.dart.
[Info from Dart2JS]:
Compiling gthr-web|web/index.html_bootstrap.dart...
[Error from Dart2JS on gthr-web|web/index.html_bootstrap.dart]:
web/Application_static_expressions.dart:1:13:
Expected ';', but got '-'.
library gthr-web.web.Application.generated_expressions;
            ^
[Info from Dart2JS]:
Took 0:00:00.916099 to compile gthr-web|web/index.html_bootstrap.dart.
Build failed.

2条回答
萌系小妹纸
2楼-- · 2019-08-05 18:36

I just started to look at your code (maybe I find more hints/suggestions/problems)

You should try to change 

polymer: ">=0.11.1-dev <0.12.0"

to

polymer: ">=0.12.0-dev <0.12.0"

This pre-release version of the Polymer package contains some paper-elements related bug-fixes.

It seems you are using a - (dash) in a library identifier where this character is invalid. You also shouldn't use a dash in Dart file names and all-lowercase characters.

EDIT
The package shadow_dom is deprecated see http://pub.dartlang.org/packages/shadow_dom for more information

EDIT

applicationFactory().addModule(new AppModule()).addMdoule(new NodeBindModule()).run();

the second addModule is misspelled (addMdoule)

查看更多
0人赞 添加讨论(0) 举报
我只想做你的唯一
3楼-- · 2019-08-05 18:40

Also keep in mind that you can override automatically resolved dependent packages versions in dependency_overrides. This is what currently works for me:

dependencies:
  angular: ">=0.12.0 <0.13.0"
  polymer: ">=0.12.0-dev <0.13.0"
  #core_elements: any
  paper_elements: any
dependency_overrides:
  analyzer: "0.15.6"
  html5lib: "0.11.0"
  web_components: "0.4.0"
dev_dependencies:
  mock: any
  unittest: any
transformers:
- angular
- polymer:
    entry_points: web/main.html

source: angular-dart@groups.google.com : AngularDart and PaperElements

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)