Repository navigation
False-Positive: Parser Error: Missing expected } at the end of the expression #9571
Description
I'm submitting a ... (check one with "x")
[X] bug report
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
I have written a custom pipe (translate). The pipe can be parameterized with an object, e.g.:
<h3 id="">{{KEY | translate:{'len': '10'}}}</h3>
Current behavior
Notice that all all opening curly braces were properly closed. Yet, the compiler produces the following template parse error
Uncaught (in promise): Template parse errors:
Parser Error: Missing expected } at the end of the expression [{{'KEY' | translate:{'arg1': '10'}}}] in HomeComponent@0:10 ("<h3 id="">[ERROR ->]{{'KEY' | translate:{'arg1': '10'}}}</h3>): HomeComponent@0:10 Error: Uncaught (in promise): Template parse errors:(…)ConsoleWriter.write @ ConsoleWriter.js:43Rx_1.Subscriber.create._this.write.sourceHint @ ConsoleWriter.js:18SafeSubscriber.__tryOrUnsub @ Subscriber.js:225SafeSubscriber.next @ Subscriber.js:174Subscriber._next @ Subscriber.js:124Subscriber.next @ Subscriber.js:88MapSubscriber._next @ map.js:82Subscriber.next @ Subscriber.js:88Subject._finalNext @ Subject.js:128Subject._next @ Subject.js:120Subject.next @ Subject.js:77message @ LogService.js:47error @ LogService.js:63ExceptionHandler.call @ ExceptionHandler.js:23(anonymous function) @ core.umd.js:9704schedulerFn @ core.umd.js:6651SafeSubscriber.__tryOrUnsub @ Subscriber.js:225SafeSubscriber.next @ Subscriber.js:174Subscriber._next @ Subscriber.js:124Subscriber.next @ Subscriber.js:88Subject._finalNext @ Subject.js:128Subject._next @ Subject.js:120Subject.next @ Subject.js:77EventEmitter.emit @ core.umd.js:6639NgZone._zoneImpl.NgZoneImpl.onError @ core.umd.js:9153NgZoneImpl.inner.inner.fork.onHandleError @ core.umd.js:9025ZoneDelegate.handleError @ zone.js:327Zone.runGuarded @ zone.js:233_loop_1 @ zone.js:487drainMicroTaskQueue @ zone.js:494ZoneTask.invoke @ zone.js:426
Bug
In contrast to what the message tells, all opening curly braces have been properly closed.
Workaround
The bug can be circumvented by putting a space in front of the closing curly braces:
<h3 id="">{{KEY | translate:{'len': '10'} }}</h3>
^^^
Expected/desired behavior
Omitting the space character should not cause a template parse error.
Reproduction
- see also comment below from @pkozlowski-opensource
Please tell us about your environment:
- Angular version: 2.0.0-rc.3
- Browser:
Chrome 49.0.2623.75 m - Language: [TypeScript 1.8.10]
I don't remember getting this error in Beta releases.
Reacted by aebla84, Eva Beekers, Robin, Junior Dussouillez, Anthony Lenglet, Günter Zöchbauer and yuvaraj-g-tfs
Activity
vicb commentedon Jun 24, 2016
Thanks for reporting. We are working on it.
DzmitryShylovich commentedon Nov 27, 2016
Still an issue http://plnkr.co/edit/ngxdCMnybbHrIyGRBlAD?p=preview
21 remaining items
jereztech commentedon Jun 3, 2022
+1 This is a legit bug and still an issue with Angular 13 using custom Pipes
fix(compiler): fix object literal parsing
xh123637 commentedon Nov 11, 2026
Hi, #71915 was closed as a duplicate of this issue, and my earlier PR #71926 was closed because it came across as a submission without project context. I'd like to try this properly: the fix would reuse the expression lexer's existing isStartOfRegex() to skip regex literals while parsing interpolations, keeping division like {{ 6 / 2 }} working. Would a fix scoped like that be welcome here, or is this intentionally left as is? I'd keep the change minimal and write the description myself.