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>

did it fix your problem?

Günter Zöchbauer
– Günter Zöchbauer

2017-09-05 04:08:56 +00:00
Commented Sep 5, 2017 at 4:08 — Günter Zöchbauer
– Günter Zöchbauer, Commented Sep 5, 2017 at 4:08
yes it did, thank you

Tushar Rai
– Tushar Rai

2017-09-05 04:20:49 +00:00
Commented Sep 5, 2017 at 4:20 — Tushar Rai
– Tushar Rai, Commented Sep 5, 2017 at 4:20
Glad to hear :)

Günter Zöchbauer
– Günter Zöchbauer

2017-09-05 04:21:23 +00:00
Commented Sep 5, 2017 at 4:21 — Günter Zöchbauer
– Günter Zöchbauer, Commented Sep 5, 2017 at 4:21

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

1

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.

answered Sep 4, 2017 at 8:42

Günter Zöchbauer

662k235 gold badges2.1k silver badges1.6k bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

App Layout of angular components with angular dart throws an error

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related