アプリアンギュラ・ダーツを含む角度コンポーネントのレイアウトでエラーが発生する

Question

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> 

Answer 1

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

を逃すカンマがあります

連続する文字列を自動的に連結します。

その間違い

を防ぐために、リンタールールは、あなたのプロジェクトディレクトリにanalysis_options.yamlに

linter: 
    rules: 
    - no_adjacent_strings_in_list 

を追加した場合、アナライザは警告を表示しますがあります。 また、dartformatを実行するだけで、通常、問題が明らかになります。