fix(ivy): properly determine the first native node of a view (#33627)

PR Close #33627

integration/_payload-limits.json

@@ -12,7 +12,7 @@
     "master": {
       "uncompressed": {
         "runtime-es2015": 1485,
-        "main-es2015": 14786,
+        "main-es2015": 15040,
         "polyfills-es2015": 36808
       }
     }
@@ -39,7 +39,7 @@
     "master": {
       "uncompressed": {
         "runtime-es2015": 2289,
-        "main-es2015": 268331,
+        "main-es2015": 268404,
         "polyfills-es2015": 36808,
         "5-es2015": 751
       }
@@ -64,4 +64,4 @@
       }
     }
   }
-}
+}

packages/core/src/render3/node_manipulation.ts

@@ -20,8 +20,8 @@ import {ProceduralRenderer3, RElement, RNode, RText, Renderer3, isProceduralRend
 import {isLContainer, isLView, isRootView} from './interfaces/type_checks';
 import {CHILD_HEAD, CLEANUP, DECLARATION_LCONTAINER, FLAGS, HOST, HookData, LView, LViewFlags, NEXT, PARENT, QUERIES, RENDERER, TVIEW, T_HOST, unusedValueExportToPlacateAjd as unused5} from './interfaces/view';
 import {assertNodeOfPossibleTypes, assertNodeType} from './node_assert';
-import {findComponentView} from './util/view_traversal_utils';
-import {getNativeByTNode, getNativeByTNodeOrNull, unwrapRNode} from './util/view_utils';
+import {findComponentView, getLViewParent} from './util/view_traversal_utils';
+import {getNativeByTNode, unwrapRNode} from './util/view_utils';
 
 const unusedValueToPlacateAjd = unused1 + unused2 + unused3 + unused4 + unused5;
 
@@ -652,25 +652,55 @@ export function appendChild(childEl: RNode | RNode[], childTNode: TNode, current
   }
 }
 
+/**
+ * Returns the first native node for a given LView, starting from the provided TNode.
+ *
+ * Native nodes are returned in the order in which those appear in the native tree (DOM).
+ */
+function getFirstNativeNode(lView: LView, tNode: TNode | null): RNode|null {
+  if (tNode !== null) {
+    ngDevMode && assertNodeOfPossibleTypes(
+                     tNode, TNodeType.Element, TNodeType.Container, TNodeType.ElementContainer,
+                     TNodeType.IcuContainer, TNodeType.Projection);
+
+    const tNodeType = tNode.type;
+
+    if (tNodeType === TNodeType.Element) {
+      return getNativeByTNode(tNode, lView);
+    } else if (tNodeType === TNodeType.Container) {
+      const lContainer = lView[tNode.index];
+      if (lContainer.length > CONTAINER_HEADER_OFFSET) {
+        const firstView = lContainer[CONTAINER_HEADER_OFFSET];
+        return getFirstNativeNode(firstView, firstView[TVIEW].firstChild);
+      } else {
+        return lContainer[NATIVE];
+      }
+    } else if (tNodeType === TNodeType.ElementContainer || tNodeType === TNodeType.IcuContainer) {
+      return getFirstNativeNode(lView, tNode.child);
+    } else {
+      const componentView = findComponentView(lView);
+      const componentHost = componentView[T_HOST] as TElementNode;
+      const parentView = getLViewParent(componentView);
+      const firstProjectedTNode: TNode|null =
+          (componentHost.projection as(TNode | null)[])[tNode.projection as number];
+
+      if (firstProjectedTNode != null) {
+        return getFirstNativeNode(parentView !, firstProjectedTNode);
+      } else {
+        return getFirstNativeNode(lView, tNode.next);
+      }
+    }
+  }
+
+  return null;
+}
+
 export function getBeforeNodeForView(viewIndexInContainer: number, lContainer: LContainer): RNode|
     null {
   const nextViewIndex = CONTAINER_HEADER_OFFSET + viewIndexInContainer + 1;
   if (nextViewIndex < lContainer.length) {
     const lView = lContainer[nextViewIndex] as LView;
-    ngDevMode && assertDefined(lView[T_HOST], 'Missing Host TNode');
-    let tViewNodeChild = (lView[T_HOST] as TViewNode).child;
-    if (tViewNodeChild !== null) {
-      if (tViewNodeChild.type === TNodeType.ElementContainer ||
-          tViewNodeChild.type === TNodeType.IcuContainer) {
-        let currentChild = tViewNodeChild.child;
-        while (currentChild && (currentChild.type === TNodeType.ElementContainer ||
-                                currentChild.type === TNodeType.IcuContainer)) {
-          currentChild = currentChild.child;
-        }
-        tViewNodeChild = currentChild || tViewNodeChild;
-      }
-      return getNativeByTNodeOrNull(tViewNodeChild, lView);
-    }
+    return getFirstNativeNode(lView, lView[TVIEW].firstChild);
   }
 
   return lContainer[NATIVE];

packages/core/test/acceptance/view_insertion_spec.ts

@@ -10,6 +10,7 @@ import {CommonModule} from '@angular/common';
 import {ChangeDetectorRef, Component, ComponentFactoryResolver, Directive, EmbeddedViewRef, Injector, NgModule, TemplateRef, ViewChild, ViewContainerRef, ViewRef} from '@angular/core';
 import {TestBed} from '@angular/core/testing';
 import {By} from '@angular/platform-browser';
+import {onlyInIvy} from '@angular/private/testing';
 
 describe('view insertion', () => {
   describe('of a simple template', () => {
@@ -347,6 +348,26 @@ describe('view insertion', () => {
 
       });
 
+      onlyInIvy('VE incorrectly inserts views before ng-container content')
+          .it('should insert before a view with a ng-container where ViewContainerRef is injected',
+              () => {
+                expect(createAndInsertViews(`
+          <ng-container [ngTemplateOutlet]="after">|before</ng-container>
+          <ng-template #after>|after</ng-template>
+        `).textContent)
+                    .toBe('insert|before|after');
+
+              });
+
+      it('should insert before a view with an element where ViewContainerRef is injected', () => {
+        expect(createAndInsertViews(`
+          <div [ngTemplateOutlet]="after">|before</div>
+          <ng-template #after>|after</ng-template>
+        `).textContent)
+            .toBe('insert|before|after');
+
+      });
+
       it('should insert before a view with an empty projection as the first root node', () => {
         expect(createAndInsertViews(`<ng-content></ng-content>|before`).textContent)
             .toBe('insert|before');

packages/core/test/bundling/cyclic_import/bundle.golden_symbols.json

@@ -263,6 +263,9 @@
   {
     "name": "findAttrIndexInNode"
   },
+  {
+    "name": "findComponentView"
+  },
   {
     "name": "findDirectiveMatches"
   },
@@ -311,6 +314,9 @@
   {
     "name": "getFactoryDef"
   },
+  {
+    "name": "getFirstNativeNode"
+  },
   {
     "name": "getInitialStylingValue"
   },
@@ -326,6 +332,9 @@
   {
     "name": "getLView"
   },
+  {
+    "name": "getLViewParent"
+  },
   {
     "name": "getMapProp"
   },
@@ -344,9 +353,6 @@
   {
     "name": "getNativeByTNode"
   },
-  {
-    "name": "getNativeByTNodeOrNull"
-  },
   {
     "name": "getNodeInjectable"
   },

packages/core/test/bundling/hello_world/bundle.golden_symbols.json

@@ -218,6 +218,9 @@
   {
     "name": "extractPipeDef"
   },
+  {
+    "name": "findComponentView"
+  },
   {
     "name": "generateExpandoInstructionBlock"
   },
@@ -245,6 +248,9 @@
   {
     "name": "getFactoryDef"
   },
+  {
+    "name": "getFirstNativeNode"
+  },
   {
     "name": "getInjectorIndex"
   },
@@ -257,15 +263,15 @@
   {
     "name": "getLView"
   },
+  {
+    "name": "getLViewParent"
+  },
   {
     "name": "getNativeAnchorNode"
   },
   {
     "name": "getNativeByTNode"
   },
-  {
-    "name": "getNativeByTNodeOrNull"
-  },
   {
     "name": "getNodeInjectable"
   },

packages/core/test/bundling/todo/bundle.golden_symbols.json

@@ -665,6 +665,9 @@
   {
     "name": "getFactoryDef"
   },
+  {
+    "name": "getFirstNativeNode"
+  },
   {
     "name": "getGuardMask"
   },
@@ -710,9 +713,6 @@
   {
     "name": "getNativeByTNode"
   },
-  {
-    "name": "getNativeByTNodeOrNull"
-  },
   {
     "name": "getNodeInjectable"
   },