Nice one.

Looks like the array item removal being done on...

// view_engine_compatibility.ts
// ViewContainerRef
remove(index?: number): void {
        this.allocateContainerIfNeeded();
        const adjustedIdx = this._adjustIndex(index, -1);
        removeView(this._lContainer, adjustedIdx);
        removeFromArray(this._lContainer[VIEW_REFS]!, adjustedIdx); // <--- this line
      }

...needs to be occurring...

// node_manipulation.ts
export function removeView(lContainer: LContainer, removeIndex: number) {
  const detachedView = detachView(lContainer, removeIndex);
  // <--- here
  detachedView && destroyLView(detachedView[TVIEW], detachedView);
}

As a workaround, you can just call destroy() on the EmbeddedViewRef itself.

export class DropdownDirective implements OnInit, OnDestroy {
  // ...
  ngOnDestroy() {
    // this.host.remove(this.ref);
    this.ref.destroy();
  }
}

Thanks, @Achilles1515 don't I need to remove it though? What happens to the destroyed but not removed view? Will that also work for ComponentRefs hostView? I checked it logging length of ViewContainerRef and it seems to be a valid workaround.

@waterplea this looks like a valid bug in ivy indeed! I wonder if you would like to send a PR correcting this issue, given that you did quite a bit of digging into it? I can help with the process getting PR to the "land-able" state. If not I can fix this issue, please let me know what works best for you.

Thanks, @Achilles1515 don't I need to remove it though? What happens to the destroyed but not removed view? Will that also work for ComponentRefs hostView? I checked it logging length of ViewContainerRef and it seems to be a valid workaround.

Calling ViewRef.destroy() does remove it from a ViewContainerRef, if it is attached to one. It first detaches it, then destroys it.

See here

  destroy(): void {
    if (this._appRef) {
      this._appRef.detachView(this);
    } else if (this._viewContainerRef) {
      const index = this._viewContainerRef.indexOf(this);

      if (index > -1) {
        this._viewContainerRef.detach(index);
      }

      this._viewContainerRef = null;
    }
    destroyLView(this._lView[TVIEW], this._lView);
  }

It should work for EmbeddedViewRefs and ComponentRef's host view, as they are both a ViewRef.

@pkozlowski-opensource

One route would be to just remove the removeView function entirely (I think it is only being called from ViewContainerRef.remove()), and just inline the detaching and destruction (similar to what is done in the snippet above from ViewRef.destroy()).

Doing so would make the ViewContainerRef.remove() method this to fix the bug (imports would also need to be updated):

      remove(index?: number): void {
        this.allocateContainerIfNeeded();
        const adjustedIdx = this._adjustIndex(index, -1);
        const detachedView = detachView(this._lContainer, adjustedIdx);
        if (detachedView) {
          // Before destroying the view, remove it from the container's array of `ViewRef`s.
          // This ensures the view container length is updated before calling
          // `destroyLView`, which could recursively call view container methods that
          // rely on an accurate container length.
          // (e.g. a method on this view container being called by a child directive's OnDestroy lifecycle hook)
          removeFromArray(this._lContainer[VIEW_REFS]!, adjustedIdx);
          destroyLView(detachedView[TVIEW], detachedView);
        }
      }

As referenced in my first comment, another option is to move the

removeFromArray(this._lContainer[VIEW_REFS]!, adjustedIdx);

call into the removeView function, but I don't know if you guys would rather keep those removeFromArray calls directly in the ViewContainerRef class for visibility.

I think removing function should be fine. I'll look into it more later, @pkozlowski-opensource I will try to make a PR.

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}