[Ivy] create embedded view is not added

[lujian98]

🐞 bug report

Affected Package

@angular/core

Is this a regression?

Yes, worked perfectly fine in v8 without Ivy. Works also without Ivy in v9.
It's interesting that in Stackblitz it works as intended, but when using Chrome/FireFox and ng serve locally it doesn't work.

Description

I try to create embedded view from template and then add the embedded view to the Content Children. However, the embedded views are not added when Ivy is on with v9.

  @ViewChild("templateToAppend", {static: true}) templateToAppend: TemplateRef;
  @ContentChildren(SomeOtherComponent, { descendants: true, read: ViewContainerRef }) someOtherComponents: QueryList;

  ngAfterContentInit() {
    this.someOtherComponents.forEach(ap => ap.createEmbeddedView(this.templateToAppend));
  }

🔬 Minimal Reproduction

https://stackblitz.com/edit/github-f2y5an?file=src%2Fapp%2Fexample%2Fexample.component.ts

https://github.com/lujian98/Angular-create-embeded-view

🔥 Exception or Error

🌍 Your Environment

Angular Version:

Angular CLI: 9.1.5
Node: 10.15.3
OS: linux x64

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

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.901.5
@angular-devkit/build-angular     0.901.5
@angular-devkit/build-optimizer   0.901.5
@angular-devkit/build-webpack     0.901.5
@angular-devkit/core              9.1.5
@angular-devkit/schematics        9.1.5
@angular/cli                      9.1.5
@ngtools/webpack                  9.1.5
@schematics/angular               9.1.5
@schematics/update                0.901.5
rxjs                              6.5.5
typescript                        3.7.5
webpack                           4.42.0

Anything else relevant?

[pkozlowski-opensource]

@lujian98 I've simplified a bit your scenario here: https://stackblitz.com/edit/github-f2y5an-hmzlxt?file=src%2Fapp%2Fapp.component.ts

Still, I'm confused about the exact problem. You are saying:

It's interesting that in Stackblitz it works as intended, but when using Chrome/FireFox and ng serve locally it doesn't work.
However, the embedded views are not added when Ivy is on with v9.

Could you please be more specific? When you say "views are not added" - are they missing from the DOM (not displayed) or something else is going on?

I'm afraid that we need more info here...

[lujian98]

[lujian98]

The embedded views are missing from the DOM when Ivy is on with "enableIvy": true.

[lujian98]

[pkozlowski-opensource]

@lujian98 I find it surprising that stackblitz works fine but your application don't. Could you please do the following:

• make sure that your app uses the same (recent) version of Angular as in stackblitz;
• try to simplify your repo to the absolute minimum (as I did in https://stackblitz.com/edit/github-f2y5an-hmzlxt?file=src%2Fapp%2Fapp.component.ts) and see if you can still reproduce
• provide us with the exact command you use to run your app

Thnx!

[dmitry-kostin]

I have a similar problem, but I have problem only with ssr rendering.
With following construction:

constructor(
private _vcr: ViewContainerRef,
)

this._vcr.createEmbeddedView(this.template)

It should create view on the same level as current component is, but it goes deeper like it doesn't see parent view;
Here is screen to compare

on the right: after ssr, with javascript turned off; server-render
on the left: in-browser render
So basically i have flat structure instead of nested where every node have its own view
ps not sure I'm able reproduce this

[pkozlowski-opensource]

I'm going to close this one as we didn't get a reproduce scenario. Please open a new issue attaching a reproduce scenario that we could use to see the bug.

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