feat(HtmlLexer): better hint on unclosed ICU message errors

fixes #10227

Author: vicb

modules/@angular/compiler/src/html_lexer.ts

@@ -202,6 +202,9 @@ class _HtmlTokenizer {
   }
 
   private _createError(msg: string, span: ParseSourceSpan): _ControlFlowError {
+    if (this._isInExpansionForm()) {
+      msg += ' (Do you have an unescaped "{" in your template?).';
+    }
     const error = new HtmlTokenError(msg, this._currentTokenType, span);
     this._currentTokenStart = null;
     this._currentTokenType = null;
@@ -523,6 +526,8 @@ class _HtmlTokenizer {
     this._requireCharCode(chars.$LBRACE);
     this._endToken([]);
 
+    this._expansionCaseStack.push(HtmlTokenType.EXPANSION_FORM_START);
+
     this._beginToken(HtmlTokenType.RAW_TEXT, this._getLocation());
     const condition = this._readUntil(chars.$COMMA);
     this._endToken([condition], this._getLocation());
@@ -534,8 +539,6 @@ class _HtmlTokenizer {
     this._endToken([type], this._getLocation());
     this._requireCharCode(chars.$COMMA);
     this._attemptCharCodeUntilFn(isNotWhitespace);
-
-    this._expansionCaseStack.push(HtmlTokenType.EXPANSION_FORM_START);
   }
 
   private _consumeExpansionCaseStart() {

modules/@angular/compiler/test/html_lexer_spec.ts

@@ -728,6 +728,14 @@ export function main() {
     });
 
     describe('errors', () => {
+      it('should parse nested expansion forms', () => {
+        expect(tokenizeAndHumanizeErrors(`<p>before { after</p>`, true)).toEqual([[
+          HtmlTokenType.RAW_TEXT,
+          'Unexpected character "EOF" (Do you have an unescaped "{" in your template?).',
+          '0:21',
+        ]]);
+      });
+
       it('should include 2 lines of context in message', () => {
         let src = '111\n222\n333\nE\n444\n555\n666\n';
         let file = new ParseSourceFile(src, 'file://');
@@ -787,7 +795,7 @@ function tokenizeAndHumanizeLineColumn(input: string): any[] {
       token => [<any>token.type, humanizeLineColumn(token.sourceSpan.start)]);
 }
 
-function tokenizeAndHumanizeErrors(input: string): any[] {
-  return tokenizeHtml(input, 'someUrl')
+function tokenizeAndHumanizeErrors(input: string, tokenizeExpansionForms: boolean = false): any[] {
+  return tokenizeHtml(input, 'someUrl', tokenizeExpansionForms)
       .errors.map(e => [<any>e.tokenType, e.msg, humanizeLineColumn(e.span.start)]);
 }