使用 Angular dart 的 Angular 组件的 App Layout 会引发错误

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',
  ],

Dart 自动连接连续的字符串。

有一个 linter 规则可以防止这种错误

如果你添加

linter:
  rules:
    - no_adjacent_strings_in_list

到您项目目录中的analysis_options.yaml，分析器会警告您。 此外，只需运行 dartformat 通常就已经揭示了问题。