template.createEmbeddedView will never run change detection

Which @angular/* package(s) are the source of the bug?

compiler

Is this a regression?

No

Description

When a template is created via template.createEmbeddedView(...), the contents will not be initialized and change detection will never run either. Every change detection would have to be called manually via view.detectChanges().

Any components inside created template will not fire the ngOnInit life cycle hook until the detectChanges is called.

Might be related to: https://github.com/angular/angular/issues/41501

Please provide a link to a minimal reproduction of the bug

https://stackblitz.com/edit/angular-ivy-aldx8q?file=src%2Fapp%2Fhello.component.ts

Please provide the exception or error you saw

The error is that no change detection is ran for any templates/components created this way.

Please provide the environment you discovered this bug in

Angular CLI: 12.1.3
Node: 14.16.0
Package Manager: npm 7.16.0
OS: win32 x64

Angular: 12.1.3
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, google-maps, language-service, material
... platform-browser, platform-browser-dynamic, router
... service-worker

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1201.3
@angular-devkit/build-angular   12.1.3
@angular-devkit/core            12.1.3
@angular-devkit/schematics      12.1.3
@schematics/angular             12.1.3
rxjs                            6.6.7
typescript                      4.3.5

Anything else?

No response

[pkozlowski-opensource]

I’m with @alxhub here - the act of creating an embedded view (TemplateRef.createEmbeddedView) corresponds to the “creation” part of a template. In this (one-time) phase we create DOM elements but don’t evaluate dynamic parts. In order to evaluate dynamic parts one needs to change-detect views.

You can totally create “standalone” views and attach those to a change detection tree “outside” of the DOM tree by attaching view to ApplicationRef.

It all might not be super-intuitive but it seems to behave as designed.

[angular-automatic-lock-bot[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.}