From a55d796c4b4cbe5bc1256339bd398090f58b4d69 Mon Sep 17 00:00:00 2001
From: Misko Hevery <misko@hevery.com>
Date: Fri, 29 Jul 2016 20:16:38 -0700
Subject: [PATCH] fix: Better error message in case of unknown property binding

---
 .../src/template_parser/template_parser.ts        |  5 +++--
 .../test/template_parser/template_parser_spec.ts  | 15 +++++++++++++--
 .../@angular/core/test/linker/integration_spec.ts |  2 +-
 3 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/modules/@angular/compiler/src/template_parser/template_parser.ts b/modules/@angular/compiler/src/template_parser/template_parser.ts
index 207184a8ac..9fd3a4cea8 100644
--- a/modules/@angular/compiler/src/template_parser/template_parser.ts
+++ b/modules/@angular/compiler/src/template_parser/template_parser.ts
@@ -815,10 +815,11 @@ class TemplateParseVisitor implements html.Visitor {
         bindingType = PropertyBindingType.Property;
         if (!this._schemaRegistry.hasProperty(elementName, boundPropertyName, this._schemas)) {
           let errorMsg =
-              `Can't bind to '${boundPropertyName}' since it isn't a known native property`;
+              `Can't bind to '${boundPropertyName}' since it isn't a known property of '${elementName}'.`;
           if (elementName.indexOf('-') !== -1) {
             errorMsg +=
-                `. To ignore this error on custom elements, add the "CUSTOM_ELEMENTS_SCHEMA" to the NgModule of this component`;
+                `\n1. If '${elementName}' is an Angular component and it has '${boundPropertyName}' input, then verify that it is part of this module.` +
+                `\n2. If '${elementName}' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message.\n`;
           }
           this._reportError(errorMsg, sourceSpan);
         }
diff --git a/modules/@angular/compiler/test/template_parser/template_parser_spec.ts b/modules/@angular/compiler/test/template_parser/template_parser_spec.ts
index 733c804cfc..ebb362bf92 100644
--- a/modules/@angular/compiler/test/template_parser/template_parser_spec.ts
+++ b/modules/@angular/compiler/test/template_parser/template_parser_spec.ts
@@ -252,6 +252,17 @@ export function main() {
                   `Template parse errors:\nInvalid property name 'bar.foo' ("<p [ERROR ->][bar.foo]>"): TestComp@0:3`);
         });
 
+        describe('errors', () => {
+          it('should throw error when binding to an unkonown property', () => {
+            expect(() => parse('<my-component [invalidProp]="bar"></my-component>', []))
+                .toThrowError(`Template parse errors:
+Can't bind to 'invalidProp' since it isn't a known property of 'my-component'.
+1. If 'my-component' is an Angular component and it has 'invalidProp' input, then verify that it is part of this module.
+2. If 'my-component' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message.
+ ("<my-component [ERROR ->][invalidProp]="bar"></my-component>"): TestComp@0:14`);
+          });
+        });
+
         it('should parse bound properties via [...] and not report them as attributes', () => {
           expect(humanizeTplAst(parse('<div [prop]="v">', []))).toEqual([
             [ElementAst, 'div'],
@@ -1240,7 +1251,7 @@ Can't have multiple template bindings on one element. Use only one attribute nam
 
       it('should report invalid property names', () => {
         expect(() => parse('<div [invalidProp]></div>', [])).toThrowError(`Template parse errors:
-Can't bind to 'invalidProp' since it isn't a known native property ("<div [ERROR ->][invalidProp]></div>"): TestComp@0:5`);
+Can't bind to 'invalidProp' since it isn't a known property of 'div'. ("<div [ERROR ->][invalidProp]></div>"): TestComp@0:5`);
       });
 
       it('should report invalid host property names', () => {
@@ -1250,7 +1261,7 @@ Can't bind to 'invalidProp' since it isn't a known native property ("<div [ERROR
           host: {'[invalidProp]': 'someProp'}
         });
         expect(() => parse('<div></div>', [dirA])).toThrowError(`Template parse errors:
-Can't bind to 'invalidProp' since it isn't a known native property ("[ERROR ->]<div></div>"): TestComp@0:0, Directive DirA`);
+Can't bind to 'invalidProp' since it isn't a known property of 'div'. ("[ERROR ->]<div></div>"): TestComp@0:0, Directive DirA`);
       });
 
       it('should report errors in expressions', () => {
diff --git a/modules/@angular/core/test/linker/integration_spec.ts b/modules/@angular/core/test/linker/integration_spec.ts
index bb437d20fa..2a2a2d76c3 100644
--- a/modules/@angular/core/test/linker/integration_spec.ts
+++ b/modules/@angular/core/test/linker/integration_spec.ts
@@ -1743,7 +1743,7 @@ function declareTests({useJit}: {useJit: boolean}) {
 
                PromiseWrapper.catchError(tcb.createAsync(MyComp), (e) => {
                  expect(e.message).toEqual(
-                     `Template parse errors:\nCan't bind to 'unknown' since it isn't a known native property ("<div [ERROR ->]unknown="{{ctxProp}}"></div>"): MyComp@0:5`);
+                     `Template parse errors:\nCan't bind to 'unknown' since it isn't a known property of 'div'. ("<div [ERROR ->]unknown="{{ctxProp}}"></div>"): MyComp@0:5`);
                  async.done();
                  return null;
                });