Literal Array trailing comma in expressions causes error

[FrancescoBorzi]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

The following works:

<div
  *ngIf="[
  'first value',
  'last value'
  ].indexOf(myVar) > -1"
></div>

the following gives error:

<div
  *ngIf="[
  'first value',
  'last value',
  ].indexOf(myVar) > -1"
></div>

the difference is the trailing comma in the array of the *ngIf condition.

Expected behavior

It should work still it's still valid javascript

Environment

Browser:
Chrome (desktop) Version:  62.0.3202.94 (Official Build) (64-bit)

Environment:

Angular CLI: 1.5.5
Node: 8.9.1
OS: linux x64
Angular: 5.0.4
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.5.5
@angular-devkit/build-optimizer: 0.0.34
@angular-devkit/core: 0.0.22
@angular-devkit/schematics: 0.0.38
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.8.5
@schematics/angular: 0.1.8
typescript: 2.4.2
webpack: 3.8.1

[mgol]

It's not just *ngIf but any expression, e.g. an event handler.

Note that it works in AngularJS.

[eddybrando]

It's even not just arrays, but also objects.

The following returns a syntax error when parsing the template during ng serve:

<div [ngClass]="{
  'class-foo': foo,
  'class-bar': !foo,
}">Lorem</div>

This is compiled without errors, tho:

<div [ngClass]="{
  'class-foo': foo,
  'class-bar': !foo
}">Lorem</div>

Both are valid Typescript. Since Typescript 2.9 traling commas are not allowed, but only on rest parameters (see breaking changes description and related fix).

Both should compile without errors, so I guess this is a bug with the way Angular compiles the templates, right?

[eddybrando]

@mhevery, I believe this is wrongly tagged as "feature" instead of "bug/fix" for the reasons exposed above.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}