App Layout of angular components with angular dart throws an error

Question

AppLayout of angular components in AngularDart is throwing an error, I am not able to recognise what is missing in the project to run. kindly help me to explain what the things are required to simply run a layout in a project.

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>

Günter Zöchbauer Günter Zöchbauer · Accepted Answer · 2017-09-04T08:42:46

There is a comma missing

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

Dart automatically concatenates consecutive strings.

There is a linter rule to prevent that mistake

If you add

linter:
  rules:
    - no_adjacent_strings_in_list

to analysis_options.yaml in your project directory, the analyzer will warn you. Also just running dartformat usually reveals the issue already.

App Layout of angular components with angular dart throws an error

1 Answers