App 각도 다트가있는 각도 구성 요소의 배치가 오류를 발생시킵니다.

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를 실행하면 대개 이미 문제가 드러납니다.