与角飞镖和高分子材料镖设计。 编译问题(material Design with Angular

2019-10-20 11:05发布

我在我的whits在这里结束。 我一直在努力,在过去48小时内获得这些技术work.I've阅读无处不在,他们应该能够工作,但它的其他后只有一个问题。 我已经尽我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.

Answer 1:

我刚开始看你的代码(也许我找到更多的提示/建议/问题)

你应该尝试改变

polymer: ">=0.11.1-dev <0.12.0"

polymer: ">=0.12.0-dev <0.12.0"

这种聚合物封装的预发布版本包含相关的bug,修复了一些纸元素。

看来你使用的是-在图书馆标识,其中这个人物是无效的(DASH)。 你也应该不使用达特文件名的破折号和全小写字符。

编辑
封装shadow_dom已被弃用看到http://pub.dartlang.org/packages/shadow_dom了解更多信息

编辑

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

第二addModule拼错( addMdoule



Answer 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和PaperElements



文章来源: material Design with Angular Dart and Polymer dart. Compilation issues