AngularDart Failed to execute 'setAttribute' on 'Element': ')' is not a valid attribute name

Question

Followed the steps in the tutorial here :

https://codelabs.developers.google.com/codelabs/angulardart-firebase-web-app/#9

Everything works well when the app_component.dart looks as follows :

import 'package:angular/angular.dart';
import 'package:angular_components/angular_components.dart';
import 'package:firebase/firebase.dart';

import 'src/todo_list/todo_list_component.dart';

// AngularDart info: https://webdev.dartlang.org/angular
// Components info: https://webdev.dartlang.org/components

@Component(
  selector: 'my-app',
  styleUrls: const ['app_component.css'],
  templateUrl: 'app_component.html',
  directives: const [materialDirectives, TodoListComponent],
  providers: const [materialProviders],
)

class AppComponent implements OnInit{
  // Nothing here yet. All logic is in TodoListComponent.
  int count = 0;
  DatabaseReference ref;


  dislike() {
    print("dislike");
  }

  like() {
    print("like");
  }


  @override
  ngOnInit() {
    initializeApp(
       apiKey: "AIzaSyAH7S_gsce9RtNI8w0z7doiP3ugVJM8ZbI",
       authDomain: "angulardart-firebase-io-2017.firebaseapp.com",
       databaseURL: "https://angulardart-firebase-io-2017.firebaseio.com",
       storageBucket: "angulardart-firebase-io-2017.appspot.com");


    ref = database().ref('counter');

    ref.onValue.listen((e) {
      count = e.snapshot.val();
    });
  }
}

and the app_component.html looks as follows

{{count}}

But, when I change app_component.html to the following :

<button (click)="dislike()")>Dislike</button>
<span>{{count}}</span>
<button (click)="like()">Like</button>

And run

pub serve

And open localhost:8080 in the browser, I get the following errors in the console :

    html_dart2js.dart:3558 EXCEPTION: Error in package:holygrail/app_component.html:2:0
STACKTRACE: 
EXCEPTION: Error in package:holygrail/app_component.html:2:0
ORIGINAL EXCEPTION: InvalidCharacterError: Failed to execute 'setAttribute' on 'Element': ')' is not a valid attribute name.
ORIGINAL STACKTRACE:
Error: Failed to execute 'setAttribute' on 'Element': ')' is not a valid attribute name.
    at ViewAppComponent0.build$0 (http://localhost:8080/main.dart.js:58614:12)
    at ViewAppComponent0.dart.AppView.create$2 (http://localhost:8080/main.dart.js:21820:21)
    at ViewAppComponent0.create$2 (http://localhost:8080/main.dart.js:23171:21)
    at _ViewAppComponentHost0.build$0 (http://localhost:8080/main.dart.js:58840:50)
    at _ViewAppComponentHost0.dart.AppView.createHostView$2 (http://localhost:8080/main.dart.js:21826:21)
    at _ViewAppComponentHost0.createHostView$2 (http://localhost:8080/main.dart.js:23184:21)
    at ComponentFactory.create$2 (http://localhost:8080/main.dart.js:22161:53)
    at ApplicationRefImpl_bootstrap_closure.call$0 (http://localhost:8080/main.dart.js:20852:22)
    at ApplicationRefImpl_run_closure.dart.ApplicationRefImpl_run_closure.call$0 (http://localhost:8080/main.dart.js:20816:34)
    at StaticClosure.dart._rootRun (http://localhost:8080/main.dart.js:6921:18)
ERROR CONTEXT:
Instance of 'DebugContext'

    at Object.wrapException (http://localhost:8080/main.dart.js:4019:17)
    at ViewAppComponent0._rethrowWithContext$3$stopChangeDetection (http://localhost:8080/main.dart.js:23341:21)
    at ViewAppComponent0._rethrowWithContext$2 (http://localhost:8080/main.dart.js:23345:21)
    at ViewAppComponent0.create$2 (http://localhost:8080/main.dart.js:23176:16)
    at _ViewAppComponentHost0.build$0 (http://localhost:8080/main.dart.js:58840:50)
    at _ViewAppComponentHost0.dart.AppView.createHostView$2 (http://localhost:8080/main.dart.js:21826:21)
    at _ViewAppComponentHost0.createHostView$2 (http://localhost:8080/main.dart.js:23184:21)
    at ComponentFactory.create$2 (http://localhost:8080/main.dart.js:22161:53)
    at ApplicationRefImpl_bootstrap_closure.call$0 (http://localhost:8080/main.dart.js:20852:22)
    at ApplicationRefImpl_run_closure.dart.ApplicationRefImpl_run_closure.call$0 (http://localhost:8080/main.dart.js:20816:34)
ORIGINAL EXCEPTION: InvalidCharacterError: Failed to execute 'setAttribute' on 'Element': ')' is not a valid attribute name.
ORIGINAL STACKTRACE:
Error: Failed to execute 'setAttribute' on 'Element': ')' is not a valid attribute name.
    at ViewAppComponent0.build$0 (http://localhost:8080/main.dart.js:58614:12)
    at ViewAppComponent0.dart.AppView.create$2 (http://localhost:8080/main.dart.js:21820:21)
    at ViewAppComponent0.create$2 (http://localhost:8080/main.dart.js:23171:21)
    at _ViewAppComponentHost0.build$0 (http://localhost:8080/main.dart.js:58840:50)
    at _ViewAppComponentHost0.dart.AppView.createHostView$2 (http://localhost:8080/main.dart.js:21826:21)
    at _ViewAppComponentHost0.createHostView$2 (http://localhost:8080/main.dart.js:23184:21)
    at ComponentFactory.create$2 (http://localhost:8080/main.dart.js:22161:53)
    at ApplicationRefImpl_bootstrap_closure.call$0 (http://localhost:8080/main.dart.js:20852:22)
    at ApplicationRefImpl_run_closure.dart.ApplicationRefImpl_run_closure.call$0 (http://localhost:8080/main.dart.js:20816:34)
    at StaticClosure.dart._rootRun (http://localhost:8080/main.dart.js:6921:18)
ERROR CONTEXT:

Answer 1

There is an extra ) before the end tag which is not allowed. The error message isn't great. The parser is changing and will provide a better error message which has just landed and will be in the next version of angular.

The message will be changing to:

[SEVERE]: Error running TemplateGenerator for lib/buttons.dart.
Template parse errors:
line 1, column 16 of ButtonsExampleComponent: 
Expected whitespace before a new decorator
<section class="margin")>
               ^^^^^^^^