2017-09-04 138 views
1

AngularDart中角度组件的AppLayout出现错误,我无法识别项目中缺少什么运行。请帮助我解释在项目中简单运行布局所需的东西。角度飞镖的角度组件的应用布局会引发错误

Serving angular_dart_app_layout web on http://localhost:8080 
[BuilderTransformer: Instance of 'LibraryBuilder' on 
angular_dart_app_layout|primary]: 
Error running TemplateGenerator for 
angular_dart_app_layout|lib/app_component.dart. 
Error: FormatException: Illegal scheme character (at character 4) 


app_component.csspackage:angular_components/src/components/app_layout/layou... 
^

Stack Trace: 
#0  _Uri._fail (dart:core/uri.dart:1597) 
#1  _Uri._makeScheme (dart:core/uri.dart:2059) 
#2  new _Uri.notSimple (dart:core/uri.dart:1437) 
#3  Uri.parse (dart:core/uri.dart:1012) 
#4  NgAssetReader._normalize 
(package:angular_compiler/src/asset.dart:29) 
#5  NgAssetReader.resolveUrl (package:angular_compiler/src/asset.dart:23) 
#6  DirectiveNormalizer.normalizeLoadedTemplate.<anonymous closure> (package:angular/src/compiler/directive_normalizer.dart:106) 
#7  MappedListIterable.elementAt (dart:_internal/iterable.dart:413) 
#8  ListIterable.toList (dart:_internal/iterable.dart:218) 
#9  DirectiveNormalizer.normalizeLoadedTemplate (package:angular/src/compiler/directive_normalizer.dart:107) 
#10  DirectiveNormalizer.normalizeTemplate.<anonymous closure> (package:angular/src/compiler/directive_normalizer.dart:75) 
#11  _rootRunUnary (dart:async/zone.dart:1128) 
#12  _CustomZone.runUnary (dart:async/zone.dart:1012) 
#13  _FutureListener.handleValue (dart:async/future_impl.dart:129) 
#14  _Future._propagateToListeners.handleValueCallback (dart:async/future_impl.dart:636) 
#15  _Future._propagateToListeners (dart:async/future_impl.dart:665) 
#16  _Future._completeWithValue (dart:async/future_impl.dart:478) 
#17  _Future._asyncComplete.<anonymous closure> (dart:async/future_impl.dart:510) 
#18  _rootRun (dart:async/zone.dart:1120) 
#19  _CustomZone.run (dart:async/zone.dart:1001) 
#20  _CustomZone.bindCallback.<anonymous closure> (dart:async/zone.dart:928) 
#21  _microtaskLoop (dart:async/schedule_microtask.dart:41) 
#22  _startMicrotaskLoop (dart:async/schedule_microtask.dart:50) 
#23  _runPendingImmediateCallback (dart:isolate-patch/isolate_patch.dart:99) 
#24  _RawReceivePortImpl._handleMessage (dart:isolate-patch/isolate_patch.dart:152) 
Build completed with 1 errors. 

app_component.dart

import 'package:angular/angular.dart'; 
import 'package:angular_components/angular_components.dart'; 
import 'src/todo_list/todo_list_component.dart'; 

@Component(
    selector: 'my-app', 
    styleUrls: const [ 
    'app_component.css' 
    'package:angular_components/src/components/app_layout/layout.scss.css', 
    ], 
    templateUrl: 'app_component.html', 
    directives: const [ 
    materialDirectives, 
    DeferredContentDirective, 
    MaterialButtonComponent, 
    MaterialIconComponent, 
    MaterialTemporaryDrawerComponent, 
    MaterialToggleComponent, 
    TodoListComponent 
    ], 
    providers: const [materialProviders], 
) 
class AppComponent { 
    bool end = false; 
    bool overlay = false; 
} 

app_component.html

<material-drawer temporary #drawer="drawer" 
       [attr.end]="end ? '' : null" 
       [attr.overlay]="overlay ? '' : null"> 
    <div *deferredContent> 
     Here is some drawer content. 
    </div> 
</material-drawer> 
<material-content> 
    <header class="material-header shadow"> 
     <div class="material-header-row"> 
      <material-button class="material-drawer-button" icon (trigger)="drawer.toggle()"> 
       <material-icon icon="menu"></material-icon> 
      </material-button> 
      <span class="material-header-title">Mobile Layout</span> 
      <div class="material-spacer"></div> 
      <nav class="material-navigation"> 
       <a href="#AppLayout">Link 1</a> 
      </nav> 
      <nav class="material-navigation"> 
       <a href="#AppLayout">Link 2</a> 
      </nav> 
      <nav class="material-navigation"> 
       <a href="#AppLayout">Link 3</a> 
      </nav> 
     </div> 
    </header> 
    <div> 
    <h1>My First AngularDart App</h1> 

    <todo-list></todo-list> 

    Lorem ipsum dolor sit amet, ad erat postea ullamcorper nec, veri veniam quo 
    et. Diam phaedrum ei mea, quaeque voluptaria efficiantur duo no. Eu adhuc 
    veritus civibus nec, sumo invidunt mel id, in vim dictas detraxit. Per an 
    legere iriure blandit. Veri iisque accusamus an pri. 
</div> 
<div class="controls"> 
    <h3>Options</h3> 

    <material-toggle [(checked)]="end" label="end"> 
    </material-toggle> 

    <material-toggle [(checked)]="overlay" label="overlay"> 
    </material-toggle> 
</div> 

+0

它解决了您的问题吗? –

+0

是的,谢谢 –

+0

很高兴听到:) –

回答

1

有一个逗号丢失

styleUrls: const [ 
    'app_component.css', // <<<=== added , 
    'package:angular_components/src/components/app_layout/layout.scss.css', 
    ], 

Dart自动连接字符串。

有棉绒规则,以防止错误

如果你在你的项目目录中添加

linter: 
    rules: 
    - no_adjacent_strings_in_list 

analysis_options.yaml,分析仪将发出警告。 也只是运行dartformat通常已经揭示了这个问题。