Example:

// hero-detail-component.html
<input [(ng-model)]="hero.name"  class="foo" [ng-class]="addClass()"></input>

// hero-detail-component.ts
addClass() {
  return this.hero.name.length > 5 ? "selected" : "";
}

Assume hero in this detail changes as a new hero is selected from a parent list

1. 1st hero is "Mr. Long Name"
2. 2nd hero is "short"
   transpiler: show line numbers that have errors #1 First hero displays and the class "selected" is present
   Integrate dartanalyzer into build #2 Second hero triggers change in value. Angular fails with exception

DOMException: Failed to execute 'add' on 'DOMTokenList': The token provided must not be empty.(…) thrown in NgClass.onCheck in the line this._applyIterableChanges(changes);

Also fails the same way when addClass is:

addClass() {
  return this.hero.name.length > 5 ? "selected" : " notSelected"; // leading space
}

But "works" if it is:

addClass() {
  return this.hero.name.length > 5 ? "selected" : "notSelected";} // no space
}

The array-result form is OK

  addClass() {
    return this.hero.name.length > 5 ? ["selected"] : [];
  }

And the object-result form is OK

  addClass() {
    return {"selected": this.hero.name.length > 5};
  }