fix(ivy): error when calling remove() or detach() on an empty view container (#29986)

Fixes Ivy throwing an error if `remove()` or `detach()` are called on an empty `ViewContainerRef`.

This PR resolves FW-1270.

PR Close #29986

packages/core/src/render3/node_manipulation.ts

@@ -371,9 +371,10 @@ export function insertView(lView: LView, lContainer: LContainer, index: number)
  * @param removeIndex The index of the view to detach
  * @returns Detached LView instance.
  */
-export function detachView(lContainer: LContainer, removeIndex: number): LView {
+export function detachView(lContainer: LContainer, removeIndex: number): LView|undefined {
   const views = lContainer[VIEWS];
   const viewToDetach = views[removeIndex];
+  if (viewToDetach) {
     if (removeIndex > 0) {
       views[removeIndex - 1][NEXT] = viewToDetach[NEXT] as LView;
     }
@@ -388,6 +389,7 @@ export function detachView(lContainer: LContainer, removeIndex: number): LView {
     viewToDetach[NEXT] = null;
     // Unsets the attached flag
     viewToDetach[FLAGS] &= ~LViewFlags.Attached;
+  }
   return viewToDetach;
 }
 
@@ -399,8 +401,10 @@ export function detachView(lContainer: LContainer, removeIndex: number): LView {
  */
 export function removeView(lContainer: LContainer, removeIndex: number) {
   const view = lContainer[VIEWS][removeIndex];
+  if (view) {
     detachView(lContainer, removeIndex);
     destroyLView(view);
+  }
 }
 
 /**

packages/core/src/render3/view_engine_compatibility.ts

@@ -281,8 +281,8 @@ export function createContainerRef(
       detach(index?: number): viewEngine_ViewRef|null {
         const adjustedIdx = this._adjustIndex(index, -1);
         const view = detachView(this._lContainer, adjustedIdx);
-        const wasDetached = this._viewRefs.splice(adjustedIdx, 1)[0] != null;
-        return wasDetached ? new ViewRef(view, view[CONTEXT], -1) : null;
+        const wasDetached = view && this._viewRefs.splice(adjustedIdx, 1)[0] != null;
+        return wasDetached ? new ViewRef(view !, view ![CONTEXT], -1) : null;
       }
 
       private _adjustIndex(index?: number, shift: number = 0) {

packages/core/test/acceptance/view_container_ref_spec.ts

@@ -113,6 +113,26 @@ describe('ViewContainerRef', () => {
         });
   });
 
+  it('should not throw when calling remove() on an empty container', () => {
+    const fixture = TestBed.createComponent(ViewContainerRefApp);
+    fixture.detectChanges();
+
+    const viewContainerRef = fixture.componentInstance.vcrComp.vcr;
+
+    expect(viewContainerRef.length).toBe(0);
+    expect(() => viewContainerRef.remove()).not.toThrow();
+  });
+
+  it('should not throw when calling detach() on an empty container', () => {
+    const fixture = TestBed.createComponent(ViewContainerRefApp);
+    fixture.detectChanges();
+
+    const viewContainerRef = fixture.componentInstance.vcrComp.vcr;
+
+    expect(viewContainerRef.length).toBe(0);
+    expect(() => viewContainerRef.detach()).not.toThrow();
+  });
+
   describe('destroy should clean the DOM in all cases:', () => {
     function executeTest(template: string) {
       TestBed.overrideTemplate(DestroyCasesComp, template).configureTestingModule({