iSharkFly-Docs
/
angular-docs-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(ivy): warn instead of throwing for unknown elements (#34524) 

Follow-up from [this discussion](https://github.com/angular/angular/pull/33419#discussion_r339296216). In Ivy we don't use the schema to validate tag names, but instead we use feature detection to figure out whether an element is supported. While this should generally be more accurate, it'll also end up throwing for some more innocent cases. E.g. now Ivy throws an error for `main` elements in IE which is accurate since IE doesn't support the element, but is annoying since there is no functionality attached.

These changes switch to logging a warning instead, similarly to what we're doing for unknown properties.

PR Close #34524
This commit is contained in:
crisbeto 2020-01-07 06:26:47 +01:00 committed by Alex Rickabaugh
parent 07ea6cf582
commit 6fda7f3da4
2 changed files with 205 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
packages/core/src/render3/instructions/element.ts
View File

@ -40,7 +40,7 @@ function elementStartFirstCreatePass(
const hasDirectives =
resolveDirectives(tView, lView, tNode, getConstant<string[]>(tViewConsts, localRefsIndex));
ngDevMode && validateElement(lView, native, tNode, hasDirectives);
ngDevMode && warnAboutUnknownElement(lView, native, tNode, hasDirectives);
if (tView.queries !== null) {
tView.queries.elementStart(tView, tNode);
@ -253,7 +253,7 @@ function setDirectiveStylingInput(
setInputsForProperty(lView, stylingInputs, propName, value);
}
function validateElement(
function warnAboutUnknownElement(
hostView: LView, element: RElement, tNode: TNode, hasDirectives: boolean): void {
const schemas = hostView[TVIEW].schemas;
@ -279,17 +279,17 @@ function validateElement(
!customElements.get(tagName));
if (isUnknown && !matchingSchemas(hostView, tagName)) {
let errorMessage = `'${tagName}' is not a known element:\n`;
errorMessage +=
let warning = `'${tagName}' is not a known element:\n`;
warning +=
`1. If '${tagName}' is an Angular component, then verify that it is part of this module.\n`;
if (tagName && tagName.indexOf('-') > -1) {
errorMessage +=
warning +=
`2. If '${tagName}' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.`;
} else {
errorMessage +=
warning +=
`2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.`;
}
throw new Error(errorMessage);
console.warn(warning);
}
}
}

136
packages/core/test/acceptance/ng_module_spec.ts
View File

@ -166,7 +166,23 @@ describe('NgModule', () => {
}).not.toThrow();
});
it('should throw unknown element error without CUSTOM_ELEMENTS_SCHEMA for element with dash in tag name',
onlyInIvy('unknown element check logs a warning rather than throwing')
.it('should warn about unknown element without CUSTOM_ELEMENTS_SCHEMA for element with dash in tag name',
() => {
@Component({template: `<custom-el></custom-el>`})
class MyComp {
}
const spy = spyOn(console, 'warn');
TestBed.configureTestingModule({declarations: [MyComp]});
const fixture = TestBed.createComponent(MyComp);
fixture.detectChanges();
expect(spy.calls.mostRecent().args[0]).toMatch(/'custom-el' is not a known element/);
});
modifiedInIvy('unknown element error thrown instead of warning')
.it('should throw unknown element error without CUSTOM_ELEMENTS_SCHEMA for element with dash in tag name',
() => {
@Component({template: `<custom-el></custom-el>`})
class MyComp {
@ -180,7 +196,22 @@ describe('NgModule', () => {
}).toThrowError(/'custom-el' is not a known element/);
});
it('should throw unknown element error without CUSTOM_ELEMENTS_SCHEMA for element without dash in tag name',
onlyInIvy('unknown element check logs a warning rather than throwing')
.it('should warn about unknown element without CUSTOM_ELEMENTS_SCHEMA for element without dash in tag name',
() => {
@Component({template: `<custom></custom>`})
class MyComp {
}
const spy = spyOn(console, 'warn');
TestBed.configureTestingModule({declarations: [MyComp]});
const fixture = TestBed.createComponent(MyComp);
fixture.detectChanges();
expect(spy.calls.mostRecent().args[0]).toMatch(/'custom' is not a known element/);
});
modifiedInIvy('unknown element error thrown instead of warning')
.it('should throw unknown element error without CUSTOM_ELEMENTS_SCHEMA for element without dash in tag name',
() => {
@Component({template: `<custom></custom>`})
class MyComp {
@ -195,7 +226,9 @@ describe('NgModule', () => {
});
onlyInIvy('test relies on Ivy-specific AOT format')
.it('should not throw unknown element error for AOT-compiled components', () => {
.it('should not log unknown element warning for AOT-compiled components', () => {
const spy = spyOn(console, 'warn');
/*
* @Component({
* selector: 'comp',
@ -253,13 +286,30 @@ describe('NgModule', () => {
imports: [MyModule],
});
expect(() => {
const fixture = TestBed.createComponent(MyComp);
fixture.detectChanges();
}).not.toThrow();
expect(spy).not.toHaveBeenCalled();
});
it('should not throw unknown element error with CUSTOM_ELEMENTS_SCHEMA', () => {
onlyInIvy('unknown element check logs a warning rather than throwing')
.it('should not warn about unknown elements with CUSTOM_ELEMENTS_SCHEMA', () => {
@Component({template: `<custom-el></custom-el>`})
class MyComp {
}
const spy = spyOn(console, 'warn');
TestBed.configureTestingModule({
declarations: [MyComp],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
});
const fixture = TestBed.createComponent(MyComp);
fixture.detectChanges();
expect(spy).not.toHaveBeenCalled();
});
modifiedInIvy('unknown element error thrown instead of warning')
.it('should not throw unknown element error with CUSTOM_ELEMENTS_SCHEMA', () => {
@Component({template: `<custom-el></custom-el>`})
class MyComp {
}
@ -275,7 +325,25 @@ describe('NgModule', () => {
}).not.toThrow();
});
it('should not throw unknown element error with NO_ERRORS_SCHEMA', () => {
onlyInIvy('unknown element check logs a warning rather than throwing')
.it('should not warn about unknown elements with NO_ERRORS_SCHEMA', () => {
@Component({template: `<custom-el></custom-el>`})
class MyComp {
}
const spy = spyOn(console, 'warn');
TestBed.configureTestingModule({
declarations: [MyComp],
schemas: [NO_ERRORS_SCHEMA],
});
const fixture = TestBed.createComponent(MyComp);
fixture.detectChanges();
expect(spy).not.toHaveBeenCalled();
});
modifiedInIvy('unknown element error thrown instead of warning')
.it('should not throw unknown element error with NO_ERRORS_SCHEMA', () => {
@Component({template: `<custom-el></custom-el>`})
class MyComp {
}
@ -291,7 +359,29 @@ describe('NgModule', () => {
}).not.toThrow();
});
it('should not throw unknown element error if element matches a directive', () => {
onlyInIvy('unknown element check logs a warning rather than throwing')
.it('should not warn about unknown elements if element matches a directive', () => {
@Component({
selector: 'custom-el',
template: '',
})
class CustomEl {
}
@Component({template: `<custom-el></custom-el>`})
class MyComp {
}
const spy = spyOn(console, 'warn');
TestBed.configureTestingModule({declarations: [MyComp, CustomEl]});
const fixture = TestBed.createComponent(MyComp);
fixture.detectChanges();
expect(spy).not.toHaveBeenCalled();
});
modifiedInIvy('unknown element error thrown instead of warning')
.it('should not throw unknown element error if element matches a directive', () => {
@Component({
selector: 'custom-el',
template: '',
@ -311,7 +401,35 @@ describe('NgModule', () => {
}).not.toThrow();
});
it('should not throw for HTML elements inside an SVG foreignObject', () => {
onlyInIvy('unknown element check logs a warning rather than throwing')
.it('should not warn for HTML elements inside an SVG foreignObject', () => {
@Component({
template: `
<svg>
<svg:foreignObject>
<xhtml:div>Hello</xhtml:div>
</svg:foreignObject>
</svg>
`,
})
class MyComp {
}
@NgModule({declarations: [MyComp]})
class MyModule {
}
const spy = spyOn(console, 'warn');
TestBed.configureTestingModule({imports: [MyModule]});
const fixture = TestBed.createComponent(MyComp);
fixture.detectChanges();
expect(spy).not.toHaveBeenCalled();
});
modifiedInIvy('unknown element error thrown instead of warning')
.it('should not throw for HTML elements inside an SVG foreignObject', () => {
@Component({
template: `
<svg>