Unhandled exception in the AngularDart compiler: type 'ParsedElementAst' is not a subtype of type 'EmbeddedTemplateAst'

[sestegra]

• macOS 10.13.5
• Dart VM version: 2.0.0-dev.68.0 (Tue Jul 10 14:47:26 2018 +0200) on "macos_x64"
• angular 5.0.0-beta+1
• angular_ast 0.5.4
• webdev 0.2.3

When compiling Angular component, I get this error

[SEVERE] angular on xxx
Unhandled exception in the AngularDart compiler!

Please report a bug: https://github.com/dart-lang/angular/issues/new
type 'ParsedElementAst' is not a subtype of type 'EmbeddedTemplateAst'
package:angular_ast/src/visitors/desugar_visitor.dart 177:16       DesugarVisitor._desugarStar
package:angular_ast/src/visitors/desugar_visitor.dart 88:14        DesugarVisitor.visitElement
package:angular_ast/src/ast/element.dart 100:20                    _ParsedElementAst&TemplateAst&ElementAst.accept
package:angular_ast/src/visitors/desugar_visitor.dart 111:29       DesugarVisitor._visitChildren.<fn>
dart:core                                                          List.forEach
package:angular_ast/src/visitors/desugar_visitor.dart 110:24       DesugarVisitor._visitChildren
package:angular_ast/src/visitors/desugar_visitor.dart 74:5         DesugarVisitor.visitElement
package:angular_ast/src/ast/element.dart 100:20                    _ParsedElementAst&TemplateAst&ElementAst.accept
package:angular_ast/src/visitors/desugar_visitor.dart 111:29       DesugarVisitor._visitChildren.<fn>
dart:core                                                          List.forEach
package:angular_ast/src/visitors/desugar_visitor.dart 110:24       DesugarVisitor._visitChildren
package:angular_ast/src/visitors/desugar_visitor.dart 74:5         DesugarVisitor.visitElement
package:angular_ast/src/ast/element.dart 100:20                    _ParsedElementAst&TemplateAst&ElementAst.accept
package:angular_ast/src/visitors/desugar_visitor.dart 111:29       DesugarVisitor._visitChildren.<fn>
dart:core                                                          List.forEach
package:angular_ast/src/visitors/desugar_visitor.dart 110:24       DesugarVisitor._visitChildren
package:angular_ast/src/visitors/desugar_visitor.dart 74:5         DesugarVisitor.visitElement
package:angular_ast/src/ast/element.dart 100:20                    _ParsedElementAst&TemplateAst&ElementAst.accept
package:angular_ast/src/visitors/desugar_visitor.dart 111:29       DesugarVisitor._visitChildren.<fn>
dart:core                                                          List.forEach
package:angular_ast/src/visitors/desugar_visitor.dart 110:24       DesugarVisitor._visitChildren
package:angular_ast/src/visitors/desugar_visitor.dart 74:5         DesugarVisitor.visitElement
package:angular_ast/src/ast/element.dart 100:20                    _ParsedElementAst&TemplateAst&ElementAst.accept
package:angular_ast/src/parser.dart 183:25                         NgParser.parse.<fn>
dart:core                                                          Iterable.toList
package:angular_ast/src/parser.dart 185:12                         NgParser.parse
package:angular_ast/angular_ast.dart 83:17                         parse
package:angular/src/compiler/ast_directive_normalizer.dart 167:25  AstDirectiveNormalizer._normalizeLoadedTemplate
package:angular/src/compiler/ast_directive_normalizer.dart 93:16   AstDirectiveNormalizer._normalizeTemplate.<fn>

[sestegra]

I put extra comments in package:angular_ast/src/visitors/desugar_visitor.dart to print current expression.

    if (isMicroExpression(starExpression)) {
      NgMicroAst micro;
      try {
        micro = parseMicroExpression(
          directiveName,
          starExpression,
          expressionOffset,
          sourceUrl: astNode.sourceUrl,
          origin: origin,
        );
      } catch (e) {
stderr.writeln("#### directiveName: $directiveName");
stderr.writeln("#### starExpression: $starExpression");
stderr.writeln("#### expressionOffset: $expressionOffset");
stderr.writeln("#### sourceUrl: ${astNode.sourceUrl}");
stderr.writeln("#### origin: $origin");
        exceptionHandler.handle(e);
        return astNode;
      }

I found out that ngFor is the issue. See logs.

#### directiveName: ngFor
#### starExpression: let task of tasks; let i = index;
#### expressionOffset: 618
#### sourceUrl: xxx
#### origin: null

#### directiveName: ngFor
#### starExpression: let item of items; let i = index;
#### expressionOffset: 433
#### sourceUrl: yyy
#### origin: null

#### directiveName: ngFor
#### starExpression: let group of groups;
#### expressionOffset: 355
#### sourceUrl: zzz
#### origin: null

[sestegra]

The ending ; is the root cause of this issue.
If I remove it, the build is working well.

[matanlurey]

Great bug report, thanks!

[roughike]

Encountered the same bug myself, and I was quite confused for a while.

Wrong:

<ul>
  <li *ngFor="let item of items;">{{ item }}</li>
</ul>

Right:

<ul>
  <li *ngFor="let item of items">{{ item }}</li>
<ul>

There's a really subtle difference between let item of items; and let item of items! Especially hard to track down when having several components.

I'm quite sure I wouldn't have made any sense about the cryptic error message without @sestegra reporting this issue, so thanks a lot!