fix(compiler): show explanatory text in template errors (#20313)

Fixes: #20076

PR Close #20313

packages/compiler-cli/test/ngc_spec.ts

@@ -1468,6 +1468,36 @@ describe('ngc transformer command-line', () => {
       expect(messages[0]).toContain(['Tagged template expressions are not supported in metadata']);
     });
 
+    // Regression: #20076
+    it('should report template error messages', () => {
+      write('src/tsconfig.json', `{
+        "extends": "../tsconfig-base.json",
+        "files": ["test-module.ts"]
+      }`);
+      write('src/lib/test.component.ts', `
+        import {Component} from '@angular/core';
+
+        @Component({
+          template: '{{thing.?stuff}}'
+        })
+        export class TestComponent {
+          thing: string;
+        }
+      `);
+      write('src/test-module.ts', `
+        import {NgModule} from '@angular/core';
+        import {TestComponent} from './lib/test.component';
+
+        @NgModule({declarations: [TestComponent]})
+        export class TestModule {}
+      `);
+      const messages: string[] = [];
+      const exitCode =
+          main(['-p', path.join(basePath, 'src/tsconfig.json')], message => messages.push(message));
+      expect(exitCode).toBe(1, 'Compile was expected to fail');
+      expect(messages[0]).toContain('Parser Error: Unexpected token');
+    });
+
     it('should allow using 2 classes with the same name in declarations with noEmitOnError=true',
        () => {
          write('src/tsconfig.json', `{

packages/compiler/src/parse_util.ts

@@ -120,12 +120,13 @@ export class ParseError {
 
   contextualMessage(): string {
     const ctx = this.span.start.getContext(100, 3);
-    return ctx ? ` ("${ctx.before}[${ParseErrorLevel[this.level]} ->]${ctx.after}")` : '';
+    return ctx ? `${this.msg} ("${ctx.before}[${ParseErrorLevel[this.level]} ->]${ctx.after}")` :
+                 this.msg;
   }
 
   toString(): string {
     const details = this.span.details ? `, ${this.span.details}` : '';
-    return `${this.msg}${this.contextualMessage()}: ${this.span.start}${details}`;
+    return `${this.contextualMessage()}: ${this.span.start}${details}`;
   }
 }