fix(ivy): return new ViewRef when detaching view (#27437)

When detaching a view by its index via `ViewContainerRef.detach(index)`, in `ViewEngine` we used to return a new `ViewRef` ([for reference](https://github.com/angular/angular/blob/master/packages/core/src/view/refs.ts#L227)), however in Ivy we return the same `ViewRef` which means that its internal `_viewContainerRef` is never reset and we'll throw an error if the consumer tried to attach it to the `ApplicationRef`. These changes return a new `ViewRef` in order to match the original behavior.

These changes also add the same errors as `ViewEngine` when attempting to attach a view that is attached already. This was the original goal of this PR, however it ended up uncovering the issues with the `ViewRef`.

PR Close #27437

packages/core/src/render3/node_manipulation.ts

@@ -369,8 +369,9 @@ export function insertView(
  * @param lContainer The container from which to detach a view
  * @param removeIndex The index of the view to detach
  * @param detached Whether or not this view is already detached.
+ * @returns Detached LView instance.
  */
-export function detachView(lContainer: LContainer, removeIndex: number, detached: boolean) {
+export function detachView(lContainer: LContainer, removeIndex: number, detached: boolean): LView {
   const views = lContainer[VIEWS];
   const viewToDetach = views[removeIndex];
   if (removeIndex > 0) {
@@ -388,6 +389,7 @@ export function detachView(lContainer: LContainer, removeIndex: number, detached
   viewToDetach[PARENT] = null;
   // Unsets the attached flag
   viewToDetach[FLAGS] &= ~LViewFlags.Attached;
+  return viewToDetach;
 }
 
 /**

packages/core/src/render3/view_engine_compatibility.ts

@@ -25,7 +25,7 @@ import {RenderFlags} from './interfaces/definition';
 import {TContainerNode, TElementContainerNode, TElementNode, TNode, TNodeFlags, TNodeType, TViewNode} from './interfaces/node';
 import {LQueries} from './interfaces/query';
 import {RComment, RElement, Renderer3, isProceduralRenderer} from './interfaces/renderer';
-import {CONTEXT, HOST_NODE, LView, QUERIES, RENDERER, TView} from './interfaces/view';
+import {CONTAINER_INDEX, CONTEXT, HOST_NODE, LView, QUERIES, RENDERER, TView} from './interfaces/view';
 import {assertNodeOfPossibleTypes, assertNodeType} from './node_assert';
 import {addRemoveViewFromContainer, appendChild, detachView, findComponentView, getBeforeNodeForView, insertView, nativeInsertBefore, nativeNextSibling, nativeParentNode, removeView} from './node_manipulation';
 import {getLView, getPreviousOrParentTNode} from './state';
@@ -284,8 +284,9 @@ export function createContainerRef(
 
       detach(index?: number): viewEngine_ViewRef|null {
         const adjustedIdx = this._adjustIndex(index, -1);
-        detachView(this._lContainer, adjustedIdx, !!this._hostTNode.detached);
+        const view = detachView(this._lContainer, adjustedIdx, !!this._hostTNode.detached);
-        return this._viewRefs.splice(adjustedIdx, 1)[0] || null;
+        const wasDetached = this._viewRefs.splice(adjustedIdx, 1)[0] != null;
+        return wasDetached ? new ViewRef(view, view[CONTEXT], view[CONTAINER_INDEX]) : null;
       }
 
       private _adjustIndex(index?: number, shift: number = 0) {

packages/core/src/render3/view_ref.ts

@@ -258,11 +258,21 @@ export class ViewRef<T> implements viewEngine_EmbeddedViewRef<T>, viewEngine_Int
    */
   checkNoChanges(): void { checkNoChanges(this.context); }
 
-  attachToViewContainerRef(vcRef: viewEngine_ViewContainerRef) { this._viewContainerRef = vcRef; }
+  attachToViewContainerRef(vcRef: viewEngine_ViewContainerRef) {
+    if (this._appRef) {
+      throw new Error('This view is already attached directly to the ApplicationRef!');
+    }
+    this._viewContainerRef = vcRef;
+  }
 
   detachFromAppRef() { this._appRef = null; }
 
-  attachToAppRef(appRef: ApplicationRef) { this._appRef = appRef; }
+  attachToAppRef(appRef: ApplicationRef) {
+    if (this._viewContainerRef) {
+      throw new Error('This view is already attached to a ViewContainer!');
+    }
+    this._appRef = appRef;
+  }
 
   private _lookUpContext(): T {
     return this._context = this._lView[PARENT] ![this._componentIndex] as T;

packages/core/test/application_ref_spec.ts

@@ -429,7 +429,7 @@ class SomeComponent {
         expect(appRef.viewCount).toBe(0);
       });
 
-      fixmeIvy('unknown') &&
+
       it('should not allow to attach a view to both, a view container and the ApplicationRef',
          () => {
            const comp = TestBed.createComponent(MyComp);