Using {{ and }} in strings in templates breaks the compiler #40133
Description
🐞 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.