fix(ivy): throw if @Input and @ContentChild share a property (#28415)

In View Engine, we supported @Input and @ContentChild annotations
on the same property. This feature was somewhat brittle because
it would only work for static queries, so it would break if a
content child was passed in wrapped in an *ngIf. Due to the
inconsistent behavior and low usage both internally and externally,
we will likely be deprecating it in the next version, and it does
not make sense to perpetuate it in Ivy.

This commit ensures that we now throw in Ivy if we encounter the
two annotations on the same property.

PR Close #28415

packages/compiler-cli/src/ngtsc/annotations/src/directive.ts

@@ -394,6 +394,10 @@ export function queriesFromFields(
     fields: {member: ClassMember, decorators: Decorator[]}[], reflector: ReflectionHost,
     evaluator: PartialEvaluator): R3QueryMetadata[] {
   return fields.map(({member, decorators}) => {
+    // Throw in case of `@Input() @ContentChild('foo') foo: any`, which is not supported in Ivy
+    if (member.decorators !.some(v => v.name === 'Input')) {
+      throw new Error(`Cannot combine @Input decorators with query decorators`);
+    }
     if (decorators.length !== 1) {
       throw new Error(`Cannot have multiple query decorators on the same class member`);
     } else if (!isPropertyTypeMember(member)) {

packages/compiler-cli/test/compliance/r3_compiler_compliance_spec.ts

@@ -1688,6 +1688,43 @@ describe('compiler compliance', () => {
         expectEmit(source, ContentQueryComponentDefinition, 'Invalid ContentQuery declaration');
       });
 
+      it('should throw error if content queries share a property with inputs', () => {
+        const files = {
+          app: {
+            ...directive,
+            'content_query.ts': `
+            import {Component, ContentChild, Input, NgModule} from '@angular/core';
+
+            @Component({
+              selector: 'content-query-component',
+              template: \`
+                <div><ng-content></ng-content></div>
+              \`
+            })
+            export class ContentQueryComponent {
+              @Input() @ContentChild('foo') foo: any;
+            }
+
+            @Component({
+              selector: 'my-app',
+              template: \`
+                <content-query-component>
+                  <div #foo></div>
+                </content-query-component>
+              \`
+            })
+            export class MyApp { }
+
+            @NgModule({declarations: [ContentQueryComponent, MyApp]})
+            export class MyModule { }
+            `
+          }
+        };
+
+        expect(() => compile(files, angularFiles))
+            .toThrowError(/Cannot combine @Input decorators with query decorators/);
+      });
+
     });
 
     describe('pipes', () => {