使用 Angular Dart 和 Polymer dart 进行材料设计。编译问题答案

【问题标题】：material Design with Angular Dart and Polymer dart. Compilation issues使用 Angular Dart 和 Polymer dart 进行材料设计。编译问题
【发布时间】：2014-07-13 13:43:42
【问题描述】：

我的心事到此为止。在过去的 48 小时里，我一直在努力让这些技术发挥作用。我到处都读到它们应该能够工作，但这只是一个接一个的问题。我尝试了我的 pubspeck.yaml 文件的各种组合，但我得到的结果要么是代码根本无法构建，要么就是不起作用 >.>

如果能得到任何帮助，我将不胜感激！

我的 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"

我的飞镖文件：

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();
  });
}

最后是我的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>

按照我的原样，Dart2js 给我以下输出：

使用 pubspeck.yaml 我得到以下输出：

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.

【问题讨论】：

您的问题到底是什么？ “不会构建”和“不起作用”根本没有帮助。
根据我不匹配的 Angular 和 Polymer 版本，要么 DOM 没有任何反应，要么在 dart2js 尝试构建我的 dart 文件时收到编译错误。
我创建了一个错误报告/功能请求以改善开发者体验code.google.com/p/dart/issues/detail?id=20025
您是否真的在第一列中有 pubspec.yaml 中的角度依赖性，或者这只是您问题中的格式错误？
我使用您提供的代码创建了一个项目。无法识别 main() 中的 AppModule（黄色波浪下划线）。您能在您的环境中确认这一点吗？

标签： dart dart-polymer angular-dart material-design paper-elements

【解决方案1】：

我刚开始看你的代码（也许我发现了更多的提示/建议/问题）

你应该尝试改变

polymer: ">=0.11.1-dev <0.12.0"

到

polymer: ">=0.12.0-dev <0.12.0"

Polymer 包的这个预发布版本包含一些与纸张元素相关的错误修复。

您似乎在该字符无效的库标识符中使用了-（破折号）。你也不应该在 Dart 文件名和全小写字符中使用破折号。

编辑
包shadow_dom 已弃用，请参阅http://pub.dartlang.org/packages/shadow_dom 了解更多信息

编辑

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

第二个addModule 拼写错误（addMdoule）

【讨论】：

我仍然从 pub build 获得相同的输出。
我更新了我的答案。您添加的错误消息显示您在库名称中使用了不允许的破折号。
嗯，我不知道那个“-”是从哪里来的。所有如果有写都张贴在这里。这可能是加载了 pubspec 的东西中的错误吗？
gthr-web 来自哪里？这是你的包裹名吗？你也不应该在这里使用破折号。
谢谢，我的包名中的 - 是问题所在。现在代码将构建，但我遇到了其他问题。如果我再次卡住，我会发布一个新问题。超！

【解决方案2】：

另外请记住，您可以覆盖 dependency_overrides 中自动解析的依赖包版本。这是目前对我有用的：

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

来源：angular-dart@groups.google.com : AngularDart and PaperElements

【讨论】：