fix(compiler): improve error message for unknown elements (#14373)
This commit is contained in:
parent
9e28568a8f
commit
2c6dab970b
|
@ -674,9 +674,16 @@ class TemplateParseVisitor implements html.Visitor {
|
||||||
const elName = element.name.replace(/^:xhtml:/, '');
|
const elName = element.name.replace(/^:xhtml:/, '');
|
||||||
|
|
||||||
if (!matchElement && !this._schemaRegistry.hasElement(elName, this._schemas)) {
|
if (!matchElement && !this._schemaRegistry.hasElement(elName, this._schemas)) {
|
||||||
const errorMsg = `'${elName}' is not a known element:\n` +
|
let errorMsg = `'${elName}' is not a known element:\n`;
|
||||||
`1. If '${elName}' is an Angular component, then verify that it is part of this module.\n` +
|
errorMsg +=
|
||||||
`2. If '${elName}' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.`;
|
`1. If '${elName}' is an Angular component, then verify that it is part of this module.\n`;
|
||||||
|
if (elName.indexOf('-') > -1) {
|
||||||
|
errorMsg +=
|
||||||
|
`2. If '${elName}' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.`;
|
||||||
|
} else {
|
||||||
|
errorMsg +=
|
||||||
|
`2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.`;
|
||||||
|
}
|
||||||
this._reportError(errorMsg, element.sourceSpan);
|
this._reportError(errorMsg, element.sourceSpan);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -725,7 +732,8 @@ class TemplateParseVisitor implements html.Visitor {
|
||||||
if (elementName.indexOf('-') > -1) {
|
if (elementName.indexOf('-') > -1) {
|
||||||
errorMsg +=
|
errorMsg +=
|
||||||
`\n1. If '${elementName}' is an Angular component and it has '${boundProp.name}' input, then verify that it is part of this module.` +
|
`\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.\n`;
|
`\n2. If '${elementName}' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.` +
|
||||||
|
`\n3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.`;
|
||||||
}
|
}
|
||||||
this._reportError(errorMsg, boundProp.sourceSpan);
|
this._reportError(errorMsg, boundProp.sourceSpan);
|
||||||
}
|
}
|
||||||
|
|
|
@ -376,22 +376,22 @@ export function main() {
|
||||||
.toThrowError(`Template parse errors:
|
.toThrowError(`Template parse errors:
|
||||||
Can't bind to 'invalidProp' since it isn't a known property of 'my-component'.
|
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.
|
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.schemas' of this component to suppress this message.
|
2. If 'my-component' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
|
||||||
("<my-component [ERROR ->][invalidProp]="bar"></my-component>"): TestComp@0:14`);
|
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 element w/o bindings', () => {
|
it('should throw error when binding to an unknown element w/o bindings', () => {
|
||||||
expect(() => parse('<unknown></unknown>', [])).toThrowError(`Template parse errors:
|
expect(() => parse('<unknown></unknown>', [])).toThrowError(`Template parse errors:
|
||||||
'unknown' is not a known element:
|
'unknown' is not a known element:
|
||||||
1. If 'unknown' is an Angular component, then verify that it is part of this module.
|
1. If 'unknown' is an Angular component, then verify that it is part of this module.
|
||||||
2. If 'unknown' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("[ERROR ->]<unknown></unknown>"): TestComp@0:0`);
|
2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("[ERROR ->]<unknown></unknown>"): TestComp@0:0`);
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should throw error when binding to an unknown custom element w/o bindings', () => {
|
it('should throw error when binding to an unknown custom element w/o bindings', () => {
|
||||||
expect(() => parse('<un-known></un-known>', [])).toThrowError(`Template parse errors:
|
expect(() => parse('<un-known></un-known>', [])).toThrowError(`Template parse errors:
|
||||||
'un-known' is not a known element:
|
'un-known' is not a known element:
|
||||||
1. If 'un-known' is an Angular component, then verify that it is part of this module.
|
1. If 'un-known' is an Angular component, then verify that it is part of this module.
|
||||||
2. If 'un-known' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("[ERROR ->]<un-known></un-known>"): TestComp@0:0`);
|
2. If 'un-known' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("[ERROR ->]<un-known></un-known>"): TestComp@0:0`);
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should throw error when binding to an invalid property', () => {
|
it('should throw error when binding to an invalid property', () => {
|
||||||
|
|
Loading…
Reference in New Issue