fix(ivy): refresh child components before executing ViewQuery function (#32922)

Child component refresh must happen before executing the ViewQueryFn because
child components could insert a template from the host that contains the result
of the ViewQuery function (see related test added in this PR).

PR Close #32922

packages/core/src/render3/instructions/shared.ts

@@ -430,17 +430,20 @@ export function refreshView<T>(
 
     setHostBindings(tView, lView);
 
-    const viewQuery = tView.viewQuery;
-    if (viewQuery !== null) {
-      executeViewQueryFn(RenderFlags.Update, viewQuery, context);
-    }
-
     // Refresh child component views.
     const components = tView.components;
     if (components !== null) {
       refreshChildComponents(lView, components);
     }
 
+    // View queries must execute after refreshing child components because a template in this view
+    // could be inserted in a child component. If the view query executes before child component
+    // refresh, the template might not yet be inserted.
+    const viewQuery = tView.viewQuery;
+    if (viewQuery !== null) {
+      executeViewQueryFn(RenderFlags.Update, viewQuery, context);
+    }
+
     // execute view hooks (AfterViewInit, AfterViewChecked)
     // PERF WARNING: do NOT extract this to a separate function without running benchmarks
     if (!checkNoChangesMode) {

packages/core/test/acceptance/query_spec.ts

@@ -265,6 +265,42 @@ describe('query logic', () => {
       expect(fixture.componentInstance.foo.length).toBe(2);
     });
 
+    it('should support ViewChild query where template is inserted in child component', () => {
+      @Component({selector: 'required', template: ''})
+      class Required {
+      }
+
+      @Component({
+        selector: 'insertion',
+        template: `<ng-container [ngTemplateOutlet]="content"></ng-container>`
+      })
+      class Insertion {
+        @Input() content !: TemplateRef<{}>;
+      }
+
+      @Component({
+        template: `
+          <ng-template #template>
+            <required></required>
+          </ng-template>
+          <insertion [content]="template"></insertion>
+          `
+      })
+      class App {
+        @ViewChild(Required, {static: false}) requiredEl !: Required;
+        viewChildAvailableInAfterViewInit?: boolean;
+
+        ngAfterViewInit() {
+          this.viewChildAvailableInAfterViewInit = this.requiredEl !== undefined;
+        }
+      }
+
+      const fixture = TestBed.configureTestingModule({declarations: [App, Insertion, Required]})
+                          .createComponent(App);
+      fixture.detectChanges();
+      expect(fixture.componentInstance.viewChildAvailableInAfterViewInit).toBe(true);
+    });
+
   });
 
   describe('content queries', () => {