feat(ivy): allow non-unique #localRefs to be defined in a template (#28627)

Prior to this change in Ivy we had strict check that disabled non-unique #localRefs usage within a given template. While this limitation was technically present in View Engine, in many cases View Engine neglected this restriction and as a result, some apps relied on a fact that multiple non-unique #localRefs can be defined and utilized to query elements via @ViewChild(ren) and @ContentChild(ren). In order to provide better compatibility with View Engine, this commit removes existing restriction.

As a part of this commit, are few tests were added to verify VE and Ivy compatibility in most common use-cases where multiple non-unique #localRefs were used.

PR Close #28627
This commit is contained in:
Andrew Kushnir
2019-02-08 14:11:33 -08:00
committed by Miško Hevery
parent 1e64f37257
commit a9afe629c7
5 changed files with 248 additions and 49 deletions

View File

@ -1471,7 +1471,7 @@ describe('ngtsc behavioral tests', () => {
});
});
describe('duplicate local refs', () => {
describe('multiple local refs', () => {
const getComponentScript = (template: string): string => `
import {Component, Directive, NgModule} from '@angular/core';
@ -1482,37 +1482,17 @@ describe('ngtsc behavioral tests', () => {
class Module {}
`;
// Components with templates listed below should
// throw the "ref is already defined" error
const invalidCases = [
const cases = [
`
<div #ref></div>
<div #ref></div>
`,
`
<div #ref>
<div #ref></div>
</div>
`,
`
<div>
<div #ref></div>
</div>
<div>
<div #ref></div>
</div>
`,
`
<ng-container>
<div #ref></div>
</ng-container>
<div #ref></div>
`
];
// Components with templates listed below should not throw
// the error, since refs are located in different scopes
const validCases = [
`,
`
<ng-template>
<div #ref></div>
@ -1529,18 +1509,8 @@ describe('ngtsc behavioral tests', () => {
`
];
invalidCases.forEach(template => {
it('should throw in case of duplicate refs', () => {
env.tsconfig();
env.write('test.ts', getComponentScript(template));
const errors = env.driveDiagnostics();
expect(errors[0].messageText)
.toContain('Internal Error: The name ref is already defined in scope');
});
});
validCases.forEach(template => {
it('should not throw in case refs are in different scopes', () => {
cases.forEach(template => {
it('should not throw', () => {
env.tsconfig();
env.write('test.ts', getComponentScript(template));
const errors = env.driveDiagnostics();