Custom Element output events not firing during initialization lifecycle hooks

🐞 bug report

Affected Package

The issue is caused by package @angular/elements

Is this a regression?

No

Description

Event listeners on Custom Element component outputs don’t fire during ngOnChanges (initial call), ngOnInit, ngAfterViewInit, or ngAfterContentInit.

🔬 Minimal Reproduction

https://github.com/antch/angular-elements-lifecycle-hooks For both the Custom and Native element there is a list which should be appended with the fired events. For the native element, we can see the callback fires during initialization of the component, but this doesn’t happen for the Custom Element.

You can look in the console to see the execution of the lifecycle hooks.

The reproduction uses artifacts from a CI build associated with #36114.

🌍 Your Environment

Angular Version: Warning: This is a build off of CI assets, so this isn’t entirely accurate.

Angular CLI: 9.0.6
Node: 10.14.2
OS: darwin x64

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

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.900.6
@angular-devkit/build-angular     0.900.6
@angular-devkit/build-optimizer   0.900.6
@angular-devkit/build-webpack     0.900.6
@angular-devkit/core              9.0.6
@angular-devkit/schematics        9.0.6
@angular/cli                      9.0.6
@ngtools/webpack                  9.0.6
@schematics/angular               9.0.6
@schematics/update                0.900.6
rxjs                              6.5.4
typescript                        3.6.5
webpack                           4.41.2

[gkalpak]

FYI, we had to revert the fix, because it turned out to be a breaking change. More specifically, if someone was using their own NgElementStrategy that did not initialize the events property before calling its connect() method (with @remackgeek’s ElementZoneStrategy being a common example), @angular/elements would break because it would try to subscribe to the strategy’s events while it was undefined.

Therefore this fix has to wait for v11, unless we can fix it in a non-breaking way (which I think is possible). I will update with more info in the coming days.

[antch]

Thanks for your continued work on these Elements issues @gkalpak!