带有 angular 个飞镖的 angular 个组件的应用程序布局会引发错误

Question

AngularDart 中 angular 组件的 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 通常已经揭示了这个问题。

带有 angular 个飞镖的 angular 个组件的应用程序布局会引发错误

App Layout of angular components with angular dart throws an error

dart

dart-pub

dart-html

angular-dart

angular-components