fix(ivy): support projecting containers created by query reads (#31790)

PR Close #31790

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

@@ -99,6 +99,13 @@ export function refreshDescendantViews(lView: LView) {
     refreshContentQueries(tView, lView);
   }
 
+  // We must materialize query results before child components are processed
+  // in case a child component has projected a container. The LContainer needs
+  // to exist so the embedded views are properly attached by the container.
+  if (!creationMode || tView.staticViewQueries) {
+    executeViewQueryFn(RenderFlags.Update, tView, lView[CONTEXT]);
+  }
+
   refreshChildComponents(tView.components);
 }
 
@@ -1752,10 +1759,6 @@ export function checkView<T>(hostView: LView, component: T) {
     creationMode && executeViewQueryFn(RenderFlags.Create, hostTView, component);
     executeTemplate(hostView, templateFn, getRenderFlags(hostView), component);
     refreshDescendantViews(hostView);
-    // Only check view queries again in creation mode if there are static view queries
-    if (!creationMode || hostTView.staticViewQueries) {
-      executeViewQueryFn(RenderFlags.Update, hostTView, component);
-    }
     safeToRunHooks = true;
   } finally {
     leaveView(oldView, safeToRunHooks);

packages/core/test/acceptance/view_container_ref_spec.ts

@@ -1625,6 +1625,40 @@ describe('ViewContainerRef', () => {
                    '<child-with-selector><p class="a"><header vcref="">blah</header><span>bar</span></p><p class="b"></p></child-with-selector>');
          });
 
+      it('should create embedded view when ViewContainerRef is inside projection', () => {
+        @Component({
+          selector: 'content-comp',
+          template: '<ng-content></ng-content>',
+        })
+        class ContentComp {
+        }
+
+        @Component({
+          selector: 'my-comp',
+          template: `
+          <content-comp>
+            <div #target></div>
+          </content-comp>
+
+          <ng-template #source>My Content</ng-template>
+        `
+        })
+        class MyComp {
+          @ViewChild('source', {static: true})
+          source !: TemplateRef<{}>;
+
+          @ViewChild('target', {read: ViewContainerRef, static: true})
+          target !: ViewContainerRef;
+
+          ngOnInit() { this.target.createEmbeddedView(this.source); }
+        }
+
+        TestBed.configureTestingModule({declarations: [MyComp, ContentComp]});
+        const fixture = TestBed.createComponent(MyComp);
+        fixture.detectChanges();
+        expect(fixture.debugElement.nativeElement.innerHTML).toContain('My Content');
+      });
+
       it('should not project the ViewContainerRef content, when the host does not match a selector',
          () => {
            @Component({