From e5a144d902a507ded381b5979a53559eefa77ed2 Mon Sep 17 00:00:00 2001
From: Dzmitry Shylovich <DmitryShilovich@gmail.com>
Date: Thu, 9 Feb 2017 21:22:44 +0300
Subject: [PATCH] fix(compiler): improve error msg for unknown properties on
 (#14373)

ng-container/ng-content

Closes #14070

PR Close #14373
---
 .../compiler/src/template_parser/template_parser.ts    |  6 +++++-
 .../test/template_parser/template_parser_spec.ts       | 10 ++++++++++
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/modules/@angular/compiler/src/template_parser/template_parser.ts b/modules/@angular/compiler/src/template_parser/template_parser.ts
index 12a10827ef..8a66913694 100644
--- a/modules/@angular/compiler/src/template_parser/template_parser.ts
+++ b/modules/@angular/compiler/src/template_parser/template_parser.ts
@@ -729,7 +729,11 @@ class TemplateParseVisitor implements html.Visitor {
           !this._schemaRegistry.hasProperty(elementName, boundProp.name, this._schemas)) {
         let errorMsg =
             `Can't bind to '${boundProp.name}' since it isn't a known property of '${elementName}'.`;
-        if (elementName.indexOf('-') > -1) {
+        if (elementName.startsWith('ng-')) {
+          errorMsg +=
+              `\n1. If '${boundProp.name}' is an Angular directive, then add 'CommonModule' to the '@NgModule.imports' of this component.` +
+              `\n2. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.`;
+        } else if (elementName.indexOf('-') > -1) {
           errorMsg +=
               `\n1. If '${elementName}' is an Angular component and it has '${boundProp.name}' 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.schemas' of this component to suppress this message.` +
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 9849fb04a9..5746695918 100644
--- a/modules/@angular/compiler/test/template_parser/template_parser_spec.ts
+++ b/modules/@angular/compiler/test/template_parser/template_parser_spec.ts
@@ -380,6 +380,16 @@ Can't bind to 'invalidProp' since it isn't a known property of 'my-component'.
 3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("<my-component [ERROR ->][invalidProp]="bar"></my-component>"): TestComp@0:14`);
           });
 
+          it('should throw error when binding to an unknown property of ng-container', () => {
+            expect(() => parse('<ng-container [invalidProp]="bar"></ng-container>', []))
+                .toThrowError(
+                    `Template parse errors:
+Can't bind to 'invalidProp' since it isn't a known property of 'ng-container'.
+1. If 'invalidProp' is an Angular directive, then add 'CommonModule' to the '@NgModule.imports' of this component.
+2. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.` +
+                    ` ("<ng-container [ERROR ->][invalidProp]="bar"></ng-container>"): TestComp@0:14`);
+          });
+
           it('should throw error when binding to an unknown element w/o bindings', () => {
             expect(() => parse('<unknown></unknown>', [])).toThrowError(`Template parse errors:
 'unknown' is not a known element: