Using {{ and }} in strings in templates breaks the compiler

[elliotleelewis]

🐞 bug report

Affected Package

I believe this is caused by incorrect lexer grammars in @angular/compiler.

Is this a regression?

Not that I'm aware of.

Description

Using {{ ... }} inside a string inside a template binding throws compile errors, complaining that it cannot parse the input.

For example:

<p>{{ 'This is a string literal which breaks the angular compiler... {{ }} <-------- ' }}</p>

This shouldn't be the case. Strings should be by-definition any characters, and shouldn't stop the app from compiling correctly.

In our use-case, we have a custom i18n solution that uses that syntax for variable replacement within localized strings, and without this fixed, we have to define those strings as class properties in the component's class file instead.

🔬 Minimal Reproduction

https://stackblitz.com/edit/angular-string-brace-bug?file=src/app/app.component.html

🔥 Exception or Error

Error: src/app/app.component.html:1:1 - error NG5002: Parser Error: Unexpected token Lexer Error: Unterminated quote at column 16 in expression [ "Hello {{ test ] at column 17 in [{{ "Hello {{ test }}!" }} ] in /PATH/TO/PROJECTS/test/src/app/app.component.html@0:0

🌍 Your Environment

Angular Version:

Angular CLI: 11.1.0-next.2
Node: 12.15.0
OS: darwin x64

Angular: 11.1.0-next.2
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router, service-worker
Ivy Workspace: Yes

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1100.3
@angular-devkit/build-angular   0.1101.0-next.2
@angular-devkit/core            11.1.0-next.2
@angular-devkit/schematics      11.1.0-next.2
@angular/fire                   6.1.4
@schematics/angular             11.1.0-next.2
@schematics/update              0.1101.0-next.2
rxjs                            6.6.3
typescript                      4.1.2

Anything else relevant?

I don't think so.

[JoostK]

I believe this was fixed in #39826 which will be part of this week's release :-)

[elliotleelewis]

@JoostK Wow, good timing!! 😂

This issue can probably be closed then.

[JoostK]

Could you test with the snapshot builds?

"@angular/compiler": "https://github.com/angular/compiler-builds"
"@angular/compiler-cli": "https://github.com/angular/compiler-cli-builds"

[elliotleelewis]

@JoostK Yep that seems to work fine. Although of course my IDE (WebStorm) is still complaining about it.

EDIT: Looks like VS Code has similar problems:

[JoostK]

Great to hear it's indeed been resolved. I am not sure about the LS (Language Service) integration; I suspect that WebStorm has its own parsing infrastructure, and VS Code is somewhat unexpected to m but maybe it uses a different version altogether (although I don't think so). There is currently work underway to more tightly integrate the LS with the compiler itself, but I couldn't tell if that would make a difference here.

[atscott]

Closing this as resolved.
With respect to the errors in the language service, Webstorm has its own implementation that we don't control. As for the VScode issue, this would be resolved by the upcoming Ivy Native Language Service, which we'll be releasing as experimental in 11.1. One of the main goals of that project was to ensure the LS diagnostics matched the diagnostics you would get from the compiler.

[elliotleelewis]

Sweet! Thanks for your help on this guys! 👍

[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.}