fix: Better error message in case of unknown property binding

This commit is contained in:
Misko Hevery 2016-07-29 20:16:38 -07:00
parent 73f02c7861
commit a55d796c4b
3 changed files with 17 additions and 5 deletions

View File

@ -815,10 +815,11 @@ class TemplateParseVisitor implements html.Visitor {
bindingType = PropertyBindingType.Property; bindingType = PropertyBindingType.Property;
if (!this._schemaRegistry.hasProperty(elementName, boundPropertyName, this._schemas)) { if (!this._schemaRegistry.hasProperty(elementName, boundPropertyName, this._schemas)) {
let errorMsg = 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) { if (elementName.indexOf('-') !== -1) {
errorMsg += 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); this._reportError(errorMsg, sourceSpan);
} }

View File

@ -252,6 +252,17 @@ export function main() {
`Template parse errors:\nInvalid property name 'bar.foo' ("<p [ERROR ->][bar.foo]>"): TestComp@0:3`); `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', () => { it('should parse bound properties via [...] and not report them as attributes', () => {
expect(humanizeTplAst(parse('<div [prop]="v">', []))).toEqual([ expect(humanizeTplAst(parse('<div [prop]="v">', []))).toEqual([
[ElementAst, 'div'], [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', () => { it('should report invalid property names', () => {
expect(() => parse('<div [invalidProp]></div>', [])).toThrowError(`Template parse errors: 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', () => { 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'} host: {'[invalidProp]': 'someProp'}
}); });
expect(() => parse('<div></div>', [dirA])).toThrowError(`Template parse errors: 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', () => { it('should report errors in expressions', () => {

View File

@ -1743,7 +1743,7 @@ function declareTests({useJit}: {useJit: boolean}) {
PromiseWrapper.catchError(tcb.createAsync(MyComp), (e) => { PromiseWrapper.catchError(tcb.createAsync(MyComp), (e) => {
expect(e.message).toEqual( 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(); async.done();
return null; return null;
}); });