fix(elements): fire custom element output events during component initialization #36161

gkalpak · 2020-03-20T13:55:13Z

~~This PR sits on top of #36114 (to avoid conflicts), so only the last two commits are new.~~

Previously, event listeners for component output events attached on an Angular custom element before inserting it into the DOM (i.e. before instantiating the underlying component) didn't fire for events emitted during initialization lifecycle hooks, such as ngAfterContentInit, ngAfterViewInit, ngOnChanges (initial call) and ngOnInit.
The reason was that that NgElementImpl subscribed to events after calling ngElementStrategy#connect(), which is where the initial change detection takes place (running the initialization lifecycle hooks).

This commit fixes this by:

Ensuring ComponentNgElementStrategy#events is defined and available for subscribing to, even before instantiating the component.
Ensuring NgElementImpl subscribes to NgElementStrategy#events before calling NgElementStrategy#connect() (which initializes the component instance).

Jira issue: FW-2010

Fixes #36141.

For future reference:
This PR increases the main bundle by ~190B (currently 453658B --> 453847B). This is caused by the newly added === null/!== null checks, the extra this.componentRefs passed as arguments to methods and the eventEmitters and events initialization 🤦‍♂

mary-poppins · 2020-03-20T14:04:51Z

You can preview ace1bd3 at https://pr36161-ace1bd3.ngbuilds.io/.

mary-poppins · 2020-03-20T17:52:35Z

You can preview cb2871e at https://pr36161-cb2871e.ngbuilds.io/.

gkalpak · 2020-03-20T20:13:06Z

aio/scripts/_payload-limits.json

@@ -12,7 +12,7 @@
    "master": {
      "uncompressed": {
        "runtime-es2015": 2987,
-        "main-es2015": 451469,
+        "main-es2015": 452031,


This ~190B increase (for the commits that are new in this PR) is caused by the newly added === null/!== null checks, the extra this.componentRefs passed as arguments to methods and the eventEmitters and events initialization 🤦‍♂

mary-poppins · 2020-03-20T20:19:28Z

You can preview c816e62 at https://pr36161-c816e62.ngbuilds.io/.

gkalpak · 2020-03-20T20:34:43Z

Marking this as blocked on #36114, because that had to go in first.
(But this is still good for review - the last two commits, which are new.)

andrewseguin

LGTM

mary-poppins · 2020-05-01T23:00:23Z

You can preview f70b5ed at https://pr36161-f70b5ed.ngbuilds.io/.

gkalpak · 2020-05-21T15:13:59Z

This requires a payload size bump for ViewEngine on 9.1.x.
Let's merge this into master and 10.0.x (RC) only. I have prepared #37231 for 9.1.x.

…y` type-casts This commit removes some unnecessary non-null assertions (`!`) and `as any` type-casts from the `elements` package.

…tialization Previously, event listeners for component output events attached on an Angular custom element before inserting it into the DOM (i.e. before instantiating the underlying component) didn't fire for events emitted during initialization lifecycle hooks, such as `ngAfterContentInit`, `ngAfterViewInit`, `ngOnChanges` (initial call) and `ngOnInit`. The reason was that that `NgElementImpl` [subscribed to events][1] _after_ calling [ngElementStrategy#connect()][2], which is where the [initial change detection][3] takes place (running the initialization lifecycle hooks). This commit fixes this by: 1. Ensuring `ComponentNgElementStrategy#events` is defined and available for subscribing to, even before instantiating the component. 2. Ensuring `NgElementImpl` subscribes to `NgElementStrategy#events` before calling `NgElementStrategy#connect()` (which initializes the component instance). Jira issue: [FW-2010](https://angular-team.atlassian.net/browse/FW-2010) [1]: https://github.com/angular/angular/blob/c0143cb2abdd172de1b95fd1d2c4cfc738640e28/packages/elements/src/create-custom-element.ts#L167-L170 [2]: https://github.com/angular/angular/blob/c0143cb2abdd172de1b95fd1d2c4cfc738640e28/packages/elements/src/create-custom-element.ts#L164 [3]: https://github.com/angular/angular/blob/c0143cb2abdd172de1b95fd1d2c4cfc738640e28/packages/elements/src/component-factory-strategy.ts#L158 Fixes angular#36141

mary-poppins · 2020-06-05T17:24:29Z

You can preview 6a35a52 at https://pr36161-6a35a52.ngbuilds.io/.

…y` type-casts (#36161) This commit removes some unnecessary non-null assertions (`!`) and `as any` type-casts from the `elements` package. PR Close #36161

…tialization (#36161) Previously, event listeners for component output events attached on an Angular custom element before inserting it into the DOM (i.e. before instantiating the underlying component) didn't fire for events emitted during initialization lifecycle hooks, such as `ngAfterContentInit`, `ngAfterViewInit`, `ngOnChanges` (initial call) and `ngOnInit`. The reason was that that `NgElementImpl` [subscribed to events][1] _after_ calling [ngElementStrategy#connect()][2], which is where the [initial change detection][3] takes place (running the initialization lifecycle hooks). This commit fixes this by: 1. Ensuring `ComponentNgElementStrategy#events` is defined and available for subscribing to, even before instantiating the component. 2. Ensuring `NgElementImpl` subscribes to `NgElementStrategy#events` before calling `NgElementStrategy#connect()` (which initializes the component instance). Jira issue: [FW-2010](https://angular-team.atlassian.net/browse/FW-2010) [1]: https://github.com/angular/angular/blob/c0143cb2abdd172de1b95fd1d2c4cfc738640e28/packages/elements/src/create-custom-element.ts#L167-L170 [2]: https://github.com/angular/angular/blob/c0143cb2abdd172de1b95fd1d2c4cfc738640e28/packages/elements/src/create-custom-element.ts#L164 [3]: https://github.com/angular/angular/blob/c0143cb2abdd172de1b95fd1d2c4cfc738640e28/packages/elements/src/component-factory-strategy.ts#L158 Fixes #36141 PR Close #36161

…nent initialization (angular#36161)" This reverts commit e9bff5f. Failures were detected in Google tests due to this commit

…nent initialization (angular#36161)" This reverts commit e9bff5f. Failures were detected by Google tests after due to this commit.

…nent initialization (#36161)" (#37524) This reverts commit e9bff5f. Failures were detected in Google tests due to this commit PR Close #37524

…y` type-casts (angular#36161) This commit removes some unnecessary non-null assertions (`!`) and `as any` type-casts from the `elements` package. PR Close angular#36161

…tialization (angular#36161) Previously, event listeners for component output events attached on an Angular custom element before inserting it into the DOM (i.e. before instantiating the underlying component) didn't fire for events emitted during initialization lifecycle hooks, such as `ngAfterContentInit`, `ngAfterViewInit`, `ngOnChanges` (initial call) and `ngOnInit`. The reason was that that `NgElementImpl` [subscribed to events][1] _after_ calling [ngElementStrategy#connect()][2], which is where the [initial change detection][3] takes place (running the initialization lifecycle hooks). This commit fixes this by: 1. Ensuring `ComponentNgElementStrategy#events` is defined and available for subscribing to, even before instantiating the component. 2. Ensuring `NgElementImpl` subscribes to `NgElementStrategy#events` before calling `NgElementStrategy#connect()` (which initializes the component instance). Jira issue: [FW-2010](https://angular-team.atlassian.net/browse/FW-2010) [1]: https://github.com/angular/angular/blob/c0143cb2abdd172de1b95fd1d2c4cfc738640e28/packages/elements/src/create-custom-element.ts#L167-L170 [2]: https://github.com/angular/angular/blob/c0143cb2abdd172de1b95fd1d2c4cfc738640e28/packages/elements/src/create-custom-element.ts#L164 [3]: https://github.com/angular/angular/blob/c0143cb2abdd172de1b95fd1d2c4cfc738640e28/packages/elements/src/component-factory-strategy.ts#L158 Fixes angular#36141 PR Close angular#36161

…nent initialization (angular#36161)" (angular#37524) This reverts commit e9bff5f. Failures were detected in Google tests due to this commit PR Close angular#37524

angular-automatic-lock-bot · 2020-07-06T16:13:43Z

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

…y` type-casts (angular#36161) This commit removes some unnecessary non-null assertions (`!`) and `as any` type-casts from the `elements` package. PR Close angular#36161

…tialization (angular#36161) Previously, event listeners for component output events attached on an Angular custom element before inserting it into the DOM (i.e. before instantiating the underlying component) didn't fire for events emitted during initialization lifecycle hooks, such as `ngAfterContentInit`, `ngAfterViewInit`, `ngOnChanges` (initial call) and `ngOnInit`. The reason was that that `NgElementImpl` [subscribed to events][1] _after_ calling [ngElementStrategy#connect()][2], which is where the [initial change detection][3] takes place (running the initialization lifecycle hooks). This commit fixes this by: 1. Ensuring `ComponentNgElementStrategy#events` is defined and available for subscribing to, even before instantiating the component. 2. Ensuring `NgElementImpl` subscribes to `NgElementStrategy#events` before calling `NgElementStrategy#connect()` (which initializes the component instance). Jira issue: [FW-2010](https://angular-team.atlassian.net/browse/FW-2010) [1]: https://github.com/angular/angular/blob/c0143cb2abdd172de1b95fd1d2c4cfc738640e28/packages/elements/src/create-custom-element.ts#L167-L170 [2]: https://github.com/angular/angular/blob/c0143cb2abdd172de1b95fd1d2c4cfc738640e28/packages/elements/src/create-custom-element.ts#L164 [3]: https://github.com/angular/angular/blob/c0143cb2abdd172de1b95fd1d2c4cfc738640e28/packages/elements/src/component-factory-strategy.ts#L158 Fixes angular#36141 PR Close angular#36161

gkalpak added type: bug/fix action: merge The PR is ready for merge by the caretaker target: patch This PR is targeted for the next patch release area: elements Issues related to Angular Elements labels Mar 20, 2020

ngbot bot modified the milestone: needsTriage Mar 20, 2020

googlebot added the cla: yes label Mar 20, 2020

gkalpak mentioned this pull request Mar 20, 2020

Custom Element output events not firing during initialization lifecycle hooks #36141

Closed

mhevery removed the action: merge The PR is ready for merge by the caretaker label Mar 20, 2020

gkalpak force-pushed the fix-elements-outputs-during-init branch from ace1bd3 to cb2871e Compare March 20, 2020 17:43

gkalpak force-pushed the fix-elements-outputs-during-init branch from cb2871e to c816e62 Compare March 20, 2020 20:09

gkalpak commented Mar 20, 2020

View reviewed changes

gkalpak marked this pull request as ready for review March 20, 2020 20:32

gkalpak added the action: merge The PR is ready for merge by the caretaker label Mar 20, 2020

pullapprove bot requested review from andrewseguin, IgorMinar and petebacondarwin March 20, 2020 20:32

gkalpak added state: blocked action: review The PR is still awaiting reviews from at least one requested reviewer and removed action: merge The PR is ready for merge by the caretaker labels Mar 20, 2020

gkalpak removed the request for review from petebacondarwin March 20, 2020 20:39

andrewseguin approved these changes Mar 23, 2020

View reviewed changes

gkalpak mentioned this pull request May 1, 2020

fix(elements): a couple of small fixes #36114

Closed

gkalpak force-pushed the fix-elements-outputs-during-init branch from c816e62 to f70b5ed Compare May 1, 2020 22:50

gkalpak force-pushed the fix-elements-outputs-during-init branch from f70b5ed to 3b75c64 Compare May 1, 2020 23:22

gkalpak added action: merge The PR is ready for merge by the caretaker target: major This PR is targeted for the next major release and removed target: patch This PR is targeted for the next patch release labels May 21, 2020

gkalpak added target: patch This PR is targeted for the next patch release and removed target: major This PR is targeted for the next major release labels May 22, 2020

gkalpak added the action: presubmit The PR is in need of a google3 presubmit label Jun 5, 2020

gkalpak added 2 commits June 5, 2020 20:14

refactor(elements): remove unnecessary non-null assertions and `as an…

7c242ae

…y` type-casts This commit removes some unnecessary non-null assertions (`!`) and `as any` type-casts from the `elements` package.

gkalpak force-pushed the fix-elements-outputs-during-init branch from 68d90e3 to 6a35a52 Compare June 5, 2020 17:14

atscott closed this in 569d1ef Jun 5, 2020

gkalpak deleted the fix-elements-outputs-during-init branch June 5, 2020 18:59

atscott mentioned this pull request Jun 10, 2020

Revert "fix(elements): fire custom element output events during compo… #37524

Closed

atscott mentioned this pull request Jun 10, 2020

Revert "fix(elements): fire custom element output events during compo… #37525

Closed

gkalpak mentioned this pull request Jun 13, 2020

fix(elements): fire custom element output events during component initialization (take 2) #37570

Closed

angular-automatic-lock-bot bot locked and limited conversation to collaborators Jul 6, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(elements): fire custom element output events during component initialization #36161

fix(elements): fire custom element output events during component initialization #36161

gkalpak commented Mar 20, 2020 •

edited

mary-poppins commented Mar 20, 2020

mary-poppins commented Mar 20, 2020

gkalpak Mar 20, 2020

mary-poppins commented Mar 20, 2020

gkalpak commented Mar 20, 2020 •

edited

andrewseguin left a comment

mary-poppins commented May 1, 2020

gkalpak commented May 21, 2020 •

edited

mary-poppins commented Jun 5, 2020

angular-automatic-lock-bot bot commented Jul 6, 2020

fix(elements): fire custom element output events during component initialization #36161

fix(elements): fire custom element output events during component initialization #36161

Conversation

gkalpak commented Mar 20, 2020 • edited

mary-poppins commented Mar 20, 2020

mary-poppins commented Mar 20, 2020

gkalpak Mar 20, 2020

Choose a reason for hiding this comment

mary-poppins commented Mar 20, 2020

gkalpak commented Mar 20, 2020 • edited

andrewseguin left a comment

Choose a reason for hiding this comment

mary-poppins commented May 1, 2020

gkalpak commented May 21, 2020 • edited

mary-poppins commented Jun 5, 2020

angular-automatic-lock-bot bot commented Jul 6, 2020

gkalpak commented Mar 20, 2020 •

edited

gkalpak commented Mar 20, 2020 •

edited

gkalpak commented May 21, 2020 •

edited