[Ivy] detach view doesn't work

[marcj]

🐞 bug report

Is this a regression?

Yes, worked perfectly fine in latest v8 without Ivy. Works also without Ivy in v9.

Description

I have a directive that renders a template and detaches it from the CD until some criteria is true. Once true I reattach it again. However in Ivy the whole detach doesn't work. After calling view.detach() the view is still checked in change detector runs and thus uses resources. In non-Ivy that works correctly: The view is never used in change detector runs when detach was called.

🔬 Minimal Reproduction

https://stackblitz.com/edit/angular-issue-repro2-xd8kbu

This Stackblitz uses Angular 9.0.0rc9, however the issue is not reproducible directly in Stackblitz (only god knows why). In Stackblitz you see the correct behavior:

But if you download that Stackblitz and run npm install && ./node_modules/.bin/ng serve then you see the actual issue:

The second line behind the : is detached and should never display anything.

Code of that wrapper:

    <div>This should increase w/ each click: <cd-counter></cd-counter></div>
    <div *wrapper>This should stay empty or 0: <cd-counter></cd-counter></div>

@Directive({
  selector: "[wrapper]"
})
export class WrapperComponent implements OnInit {
  constructor(
    protected template: TemplateRef<any>,
    protected viewContainer: ViewContainerRef
  ) {}

  ngOnInit() {
    const view = this.viewContainer.createEmbeddedView(this.template);
    view.detach();
  }
}

Versions

9.0.0: I tested rc7, rc8, rc9. None worked correctly. When I opt out of Ivy using "enableIvy": false it works correctly (only tested with with rc9).

🌍 Your Environment

Angular Version:

Angular CLI: 9.0.0-rc.9
Node: 12.14.1
OS: darwin x64

Angular: 9.0.0-rc.9
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.900.0-rc.9
@angular-devkit/build-angular     0.900.0-rc.9
@angular-devkit/build-optimizer   0.900.0-rc.9
@angular-devkit/build-webpack     0.900.0-rc.9
@angular-devkit/core              9.0.0-rc.9
@angular-devkit/schematics        9.0.0-rc.9
@angular/cdk                      9.0.0-rc.7
@ngtools/webpack                  9.0.0-rc.9
@schematics/angular               9.0.0-rc.9
@schematics/update                0.900.0-rc.9
rxjs                              6.5.4
typescript                        3.6.4
webpack                           4.41.2

Anything else relevant?

It's interesting that in Stackblitz it works as intended, but when using Chrome and ng serve locally it doesn't work. I assume that Stackblitz uses some v8 components or not the Ivy renderer, but that's just a guess as I have no knowledge about how Stackblitz actually starts the angular dev server and whether they overwrite some settings.

[alexzuza]

Reproduction with Angular rc9 AOT https://ng-run.com/edit/KOdZml0HwC7nzauj6onq?aot=true&open=app%2Fapp.component.ts

[angular-automatic-lock-bot]

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.}