fix(core): incorrectly validating properties on ng-content and ng-container (#37773)

Fixes the following issues related to how we validate properties during JIT:
- The invalid property warning was printing `null` as the node name
for `ng-content`. The problem is that when generating a template from
 `ng-content` we weren't capturing the node name.
- We weren't running property validation on `ng-container` at all.
This used to be supported on ViewEngine and seems like an oversight.

In the process of making these changes, I found and cleaned up a
few places where we were passing in `LView` unnecessarily.

PR Close #37773
This commit is contained in:
crisbeto
2020-07-15 07:03:04 +02:00
committed by Andrew Kushnir
parent 406f801b70
commit bf641e1b4b
6 changed files with 116 additions and 15 deletions

View File

@ -287,6 +287,70 @@ describe('NgModule', () => {
}).toThrowError(/'custom' is not a known element/);
});
onlyInIvy('unknown element check logs an error message rather than throwing')
.it('should report unknown property bindings on ng-content', () => {
@Component({template: `<ng-content *unknownProp="123"></ng-content>`})
class App {
}
TestBed.configureTestingModule({declarations: [App]});
const spy = spyOn(console, 'error');
const fixture = TestBed.createComponent(App);
fixture.detectChanges();
expect(spy.calls.mostRecent()?.args[0])
.toMatch(
/Can't bind to 'unknownProp' since it isn't a known property of 'ng-content'/);
});
modifiedInIvy('unknown element error thrown instead of warning')
.it('should throw for unknown property bindings on ng-content', () => {
@Component({template: `<ng-content *unknownProp="123"></ng-content>`})
class App {
}
TestBed.configureTestingModule({declarations: [App]});
expect(() => {
const fixture = TestBed.createComponent(App);
fixture.detectChanges();
})
.toThrowError(
/Can't bind to 'unknownProp' since it isn't a known property of 'ng-content'/);
});
onlyInIvy('unknown element check logs an error message rather than throwing')
.it('should report unknown property bindings on ng-container', () => {
@Component({template: `<ng-container [unknown-prop]="123"></ng-container>`})
class App {
}
TestBed.configureTestingModule({declarations: [App]});
const spy = spyOn(console, 'error');
const fixture = TestBed.createComponent(App);
fixture.detectChanges();
expect(spy.calls.mostRecent()?.args[0])
.toMatch(
/Can't bind to 'unknown-prop' since it isn't a known property of 'ng-container'/);
});
modifiedInIvy('unknown element error thrown instead of warning')
.it('should throw for unknown property bindings on ng-container', () => {
@Component({template: `<ng-container [unknown-prop]="123"></ng-container>`})
class App {
}
TestBed.configureTestingModule({declarations: [App]});
expect(() => {
const fixture = TestBed.createComponent(App);
fixture.detectChanges();
})
.toThrowError(
/Can't bind to 'unknown-prop' since it isn't a known property of 'ng-container'/);
});
onlyInIvy('test relies on Ivy-specific AOT format').describe('AOT-compiled components', () => {
function createComponent(
template: (rf: any) => void, vars: number, consts?: (number|string)[][]) {