material Design with Angular Dart and Polymer dart. Compilation issues

喜夏-厌秋 提交于 2019-12-24 16:27:37

问题


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.

回答1:


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)




回答2:


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



来源:https://stackoverflow.com/questions/24723315/material-design-with-angular-dart-and-polymer-dart-compilation-issues

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!