fix(ivy): properly handle re-projection with an empty set of nodes to re-project (#31306)

PR Close #31306

packages/core/src/render3/node_manipulation.ts

@@ -780,6 +780,7 @@ function executeActionOnView(
  * @param renderer Renderer to use
  * @param action action to perform (insert, detach, destroy)
  * @param lView The LView which needs to be inserted, detached, destroyed.
+ * @param tProjectionNode projection TNode to process
  * @param renderParent parent DOM element for insertion/removal.
  * @param beforeNode Before which node the insertions should happen.
  */
@@ -789,20 +790,25 @@ function executeActionOnProjection(
     beforeNode: RNode | null | undefined) {
   const componentLView = findComponentView(lView);
   const componentNode = componentLView[T_HOST] as TElementNode;
-  const nodeToProject = componentNode.projection ![tProjectionNode.projection] !;
+  ngDevMode && assertDefined(
-  if (Array.isArray(nodeToProject)) {
+                   componentNode.projection,
-    for (let i = 0; i < nodeToProject.length; i++) {
+                   'Element nodes for which projection is processed must have projection defined.');
-      const rNode = nodeToProject[i];
+  const nodeToProject = componentNode.projection ![tProjectionNode.projection];
-      ngDevMode && assertDomNode(rNode);
+  if (nodeToProject !== undefined) {
-      executeActionOnElementOrContainer(action, renderer, renderParent, rNode, beforeNode);
+    if (Array.isArray(nodeToProject)) {
-    }
+      for (let i = 0; i < nodeToProject.length; i++) {
-  } else {
+        const rNode = nodeToProject[i];
-    let projectionTNode: TNode|null = nodeToProject;
+        ngDevMode && assertDomNode(rNode);
-    const projectedComponentLView = componentLView[PARENT] as LView;
+        executeActionOnElementOrContainer(action, renderer, renderParent, rNode, beforeNode);
-    while (projectionTNode !== null) {
+      }
-      executeActionOnNode(
+    } else {
-          renderer, action, projectedComponentLView, projectionTNode, renderParent, beforeNode);
+      let projectionTNode: TNode|null = nodeToProject;
-      projectionTNode = projectionTNode.projectionNext;
+      const projectedComponentLView = componentLView[PARENT] as LView;
+      while (projectionTNode !== null) {
+        executeActionOnNode(
+            renderer, action, projectedComponentLView, projectionTNode, renderParent, beforeNode);
+        projectionTNode = projectionTNode.projectionNext;
+      }
     }
   }
 }
@@ -870,13 +876,12 @@ function executeActionOnElementContainerOrIcuContainer(
 function executeActionOnNode(
     renderer: Renderer3, action: WalkTNodeTreeAction, lView: LView, tNode: TNode,
     renderParent: RElement | null, beforeNode: RNode | null | undefined): void {
-  const elementContainerRootTNodeType = tNode.type;
+  const nodeType = tNode.type;
-  if (elementContainerRootTNodeType === TNodeType.ElementContainer ||
+  if (nodeType === TNodeType.ElementContainer || nodeType === TNodeType.IcuContainer) {
-      elementContainerRootTNodeType === TNodeType.IcuContainer) {
     executeActionOnElementContainerOrIcuContainer(
         renderer, action, lView, tNode as TElementContainerNode | TIcuContainerNode, renderParent,
         beforeNode);
-  } else if (elementContainerRootTNodeType === TNodeType.Projection) {
+  } else if (nodeType === TNodeType.Projection) {
     executeActionOnProjection(
         renderer, action, lView, tNode as TProjectionNode, renderParent, beforeNode);
   } else {

packages/core/test/acceptance/view_container_ref_spec.ts

@@ -1551,6 +1551,33 @@ describe('ViewContainerRef', () => {
               '<child-with-view>Before (inside)- Before projected <header vcref="">blah</header><span>bar</span> After projected -After (inside)</child-with-view>');
     });
 
+    it('should handle empty re-projection into the root of a view', () => {
+      @Component({
+        selector: 'root-comp',
+        template: `<ng-template [ngIf]="show"><ng-content></ng-content></ng-template>`,
+      })
+      class RootComp {
+        @Input() show: boolean = true;
+      }
+
+      @Component({
+        selector: 'my-app',
+        template: `<root-comp [show]="show"><ng-content></ng-content><div></div></root-comp>`
+      })
+      class MyApp {
+        show = true;
+      }
+
+      TestBed.configureTestingModule({declarations: [MyApp, RootComp]});
+      const fixture = TestBed.createComponent(MyApp);
+      fixture.detectChanges();
+      expect(fixture.nativeElement.querySelectorAll('div').length).toBe(1);
+
+      fixture.componentInstance.show = false;
+      fixture.detectChanges();
+      expect(fixture.nativeElement.querySelectorAll('div').length).toBe(0);
+    });
+
     describe('with select', () => {
 
       @Component({