@deferred under a <template> is not removed when the <template> is

[leonsenft]

Consider the following example:

<button (click)="show = !show">Toggle</button>
<div *ngIf="show">
  <hello-world @deferred></hello-world>
</div>

Pressing the Toggle button will alternate between adding and removing the <hello-world> component from the DOM. This behavior is broken, if this example is changed so that the parent element of the @deferred component is itself a <template>:

<button (click)="show = !show">Toggle</button>
<template [ngIf]="show">
  <hello-world @deferred></hello-world>
</template>

Now rather than alternating between adding and removing the <hello-world> component, pressing the Toggle button will alternative between adding and doing nothing. This means new <hello-world> components will be repeatedly appended to the DOM.

[matanlurey]

Wow! That's interesting considering the de-sugaring process. Does this work:

<button (click)="show = !show">Toggle</button>
<template [ngIf]="show">
  <div>
    <hello-world @deferred></hello-world>
  </div>
</template>

... i.e. an exact representation of the first example using <template>?

Is the issue that @deferred doesn't work if its immediate parent is <template>?

[leonsenft]

I haven't tested, but I'd assume that example works since it's effectively equivalent to my first example.

Yes, I believe the issue is related to the immediately nested <template> elements.

<button (click)="show = !show">Toggle</button>
<template [ngIf]="show">
  <template> <!-- defer instantiated by generated code -->
    <hello-world></hello-world>
  </template>
</template>

[matanlurey]

Thanks! I'll investigate.

[matanlurey]

Looking at the following two snippets:

    <deferred-child-1 @deferred></deferred-child-1>
    <template [ngIf]="showDeferredChild">
      <deferred-child-2 @deferred></deferred-child-2>
    </template>
    <div *ngIf="showDeferredChild">
      <deferred-child-3 @deferred #queryMe></deferred-child-3>
    </div>

The code that is generated is:

class _ViewTestContainerComponent1 extends AppView<import1.TestContainerComponent> {
  import7.Element _el_0;
  AppView _compView_0;
  dynamic _DeferredChild1Component_0_5;
  _ViewTestContainerComponent1(AppView<dynamic> parentView, int parentIndex) : super(import5.ViewType.embedded, {}, parentView, parentIndex, ChangeDetectionStrategy.CheckAlways) {
    componentType = ViewTestContainerComponent0._renderType;
  }
  @override
  ComponentRef<import1.TestContainerComponent> build() {
    _compView_0 = deflib1.viewFactory_DeferredChild1Component0(this, 0);
    _el_0 = _compView_0.rootEl;
    _DeferredChild1Component_0_5 = deflib0.DeferredChild1Component();
    _compView_0.create(_DeferredChild1Component_0_5, []);
    init0(_el_0);
    return null;
  }

  @override
  void detectChangesInternal() {
    _compView_0.detectChanges();
  }

  @override
  void destroyInternal() {
    _compView_0?.destroy();
  }
}

class _ViewTestContainerComponent3 extends AppView<import1.TestContainerComponent> {
  import7.Element _el_0;
  AppView _compView_0;
  dynamic _DeferredChild2Component_0_5;
  _ViewTestContainerComponent3(AppView<dynamic> parentView, int parentIndex) : super(import5.ViewType.embedded, {}, parentView, parentIndex, ChangeDetectionStrategy.CheckAlways) {
    componentType = ViewTestContainerComponent0._renderType;
  }
  @override
  ComponentRef<import1.TestContainerComponent> build() {
    _compView_0 = deflib1.viewFactory_DeferredChild2Component0(this, 0);
    _el_0 = _compView_0.rootEl;
    _DeferredChild2Component_0_5 = deflib0.DeferredChild2Component();
    _compView_0.create(_DeferredChild2Component_0_5, []);
    init0(_el_0);
    return null;
  }

  @override
  void detectChangesInternal() {
    _compView_0.detectChanges();
  }

  @override
  void destroyInternal() {
    _compView_0?.destroy();
  }
}

and

class _ViewTestContainerComponent5 extends AppView<import1.TestContainerComponent> {
  import7.Element _el_0;
  AppView _compView_0;
  dynamic _DeferredChild3Component_0_5;
  _ViewTestContainerComponent5(AppView<dynamic> parentView, int parentIndex) : super(import5.ViewType.embedded, {}, parentView, parentIndex, ChangeDetectionStrategy.CheckAlways) {
    componentType = ViewTestContainerComponent0._renderType;
  }
  @override
  ComponentRef<import1.TestContainerComponent> build() {
    _compView_0 = deflib1.viewFactory_DeferredChild3Component0(this, 0);
    _el_0 = _compView_0.rootEl;
    _DeferredChild3Component_0_5 = deflib0.DeferredChild3Component();
    _compView_0.create(_DeferredChild3Component_0_5, []);
    init0(_el_0);
    return null;
  }

  @override
  void detectChangesInternal() {
    _compView_0.detectChanges();
  }

  @override
  void dirtyParentQueriesInternal() {
    import9.unsafeCast<ViewTestContainerComponent0>(parentView.parentView)._query_queryMe_1_0_isDirty = true;
  }

  @override
  void destroyInternal() {
    _compView_0?.destroy();
  }
}

... one class each.

[matanlurey]

The generated views themselves don't seem wrong. Let's look at the insertion points:

class ViewTestContainerComponent0 extends AppView<import1.TestContainerComponent> {
  ViewContainer _appEl_1;
  ViewContainer _appEl_2;
  NgIf _NgIf_2_9;
  ViewContainer _appEl_3;
  bool _query_queryMe_1_0_isDirty = true;
  NgIf _NgIf_3_9;
  ViewContainer _appEl_4;
  ViewContainer _appEl_5;
  static RenderComponentType _renderType;
  ViewTestContainerComponent0(AppView<dynamic> parentView, int parentIndex) : super(import5.ViewType.component, {}, parentView, parentIndex, ChangeDetectionStrategy.CheckAlways) {
    rootEl = import7.document.createElement('test-container');
    _renderType ??= import8.appViewUtils.createRenderType((import9.isDevMode ? 'asset:third_party.dart_src.angular._goldens/test/_files/deferred/container_component.dart' : null), ViewEncapsulation.None, styles$TestContainerComponent);
    setupComponentType(_renderType);
  }
  @override
  ComponentRef<import1.TestContainerComponent> build() {
    final _rootEl = rootEl;
    final import7.HtmlElement parentRenderNode = initViewRoot(_rootEl);
    import7.Text _text_0 = import7.Text('\'');
    parentRenderNode.append(_text_0);
    final _anchor_1 = createViewContainerAnchor();
    parentRenderNode.append(_anchor_1);
    _appEl_1 = ViewContainer(1, null, this, _anchor_1);
    TemplateRef _TemplateRef_1_7 = TemplateRef(_appEl_1, viewFactory_TestContainerComponent1);
    loadDeferred(deflib0.loadLibrary, deflib1.loadLibrary, _appEl_1, _TemplateRef_1_7);
    final _anchor_2 = createViewContainerAnchor();
    parentRenderNode.append(_anchor_2);
    _appEl_2 = ViewContainer(2, null, this, _anchor_2);
    TemplateRef _TemplateRef_2_8 = TemplateRef(_appEl_2, viewFactory_TestContainerComponent2);
    _NgIf_2_9 = NgIf(_appEl_2, _TemplateRef_2_8);
    final _anchor_3 = createViewContainerAnchor();
    parentRenderNode.append(_anchor_3);
    _appEl_3 = ViewContainer(3, null, this, _anchor_3);
    TemplateRef _TemplateRef_3_8 = TemplateRef(_appEl_3, viewFactory_TestContainerComponent4);
    _NgIf_3_9 = NgIf(_appEl_3, _TemplateRef_3_8);
    final _anchor_4 = createViewContainerAnchor();
    parentRenderNode.append(_anchor_4);
    _appEl_4 = ViewContainer(4, null, this, _anchor_4);
    TemplateRef _TemplateRef_4_7 = TemplateRef(_appEl_4, viewFactory_TestContainerComponent6);
    loadDeferred(deflib0.loadLibrary, deflib1.loadLibrary, _appEl_4, _TemplateRef_4_7);
    final _anchor_5 = createViewContainerAnchor();
    parentRenderNode.append(_anchor_5);
    _appEl_5 = ViewContainer(5, null, this, _anchor_5);
    TemplateRef _TemplateRef_5_7 = TemplateRef(_appEl_5, viewFactory_TestContainerComponent7);
    loadDeferred(deflib0.loadLibrary, deflib1.loadLibrary, _appEl_5, _TemplateRef_5_7);
    init(const [], null);
    return null;
  }

  @override
  void detectChangesInternal() {
    final import1.TestContainerComponent _ctx = ctx;
    _NgIf_2_9.ngIf = _ctx.showDeferredChild;
    _NgIf_3_9.ngIf = _ctx.showDeferredChild;
    _appEl_2.detectChangesInNestedViews();
    _appEl_3.detectChangesInNestedViews();
    if (!import8.AppViewUtils.throwOnChanges) {
      if (_query_queryMe_1_0_isDirty) {
        ctx.queryDeferredChild = import8.firstOrNull(_appEl_3.mapNestedViews((_ViewTestContainerComponent4 nestedView) {
          return nestedView._appEl_1.mapNestedViews((_ViewTestContainerComponent5 nestedView) {
            return [nestedView._DeferredChild3Component_0_5];
          });
        }));
        _query_queryMe_1_0_isDirty = false;
      }
    }
    _appEl_1.detectChangesInNestedViews();
    _appEl_4.detectChangesInNestedViews();
    _appEl_5.detectChangesInNestedViews();
  }

  @override
  void destroyInternal() {
    _appEl_2?.destroyNestedViews();
    _appEl_3?.destroyNestedViews();
  }
}

[leonsenft]

I think the embedded ViewTestViewContainer{2|4} are what we want to look at (these are the ones created by NgIf).