fix(angular, react, vue): overlays no longer throw errors when used inside tests

[liamdebeasi]

Pull request checklist

Please check if your PR fulfills the following requirements:

• Tests for the changes have been added (for bug fixes / features)
• Docs have been reviewed and added / updated if needed (for bug fixes / features)
• Build (npm run build) was run locally and any changes were pushed
• Lint (npm run lint) has passed locally and any fixes were made for failures

Pull request type

Please check the type of change your PR introduces:

• Bugfix
• Feature
• Code style update (formatting, renaming)
• Refactoring (no functional changes, no api changes)
• Build related changes
• Documentation content changes
• Other (please describe):

What is the current behavior?

Issue Number: resolves #24549, resolves #24590

In order to get custom elements defined when using controllers, we import the source component which would trick Stencil into including the compiled components in the overlays file. From there, we would register those compiled components with the Custom Elements Registry.

Unfortunately, this resulted in two issues:

1. Action Sheet was being initialized after it was referenced by its controller (bug: action sheet controller referencing ActionSheet before initialized #24549).
2. Registering the components this way assumed that everyone was using the custom elements build. This resulted in controllers breaking for Angular users (bug: Angular 13 Jest Tests fail while opening overlays: Cannot set property '$lazyInstance$' of undefined (present is not a function) #24590). When the controller was created, the custom elements version of the overlay was created before the lazy loaded version was created. However, Stencil was expecting the lazy loaded version as it contained additional information it needed.

What is the new behavior?

• Rather than try and build on the previous bandaid, I feel it would be better to have the React and Vue integrations register their over overlay components.
• This allows Angular to work with lazy loaded and React/Vue to work with custom elements.
• When Angular switches over to use custom elements, it will need to do something similar to what is done for React/Vue in this PR.
• The one tradeoff is people using @ionic/core and custom elements build will need to import and define the overlay component before they can use the controller. However, this aligns with what is expected when using core + CE build anyways. Developers need to call initialize() when using core directly, but this will be called for them when using a framework integration.

Does this introduce a breaking change?

• Yes
• No

Other information

Dev Build: 6.0.5-dev.1643732746.a377f15

[amandaejohnston]

Had a couple questions below 👀 Also, might be good to set up a tech debt ticket for Angular if you haven't done so already.

[liamdebeasi]

We have a ticket for the Angular custom elements build in FW-191, so I made sure to mention this change in that ticket as well.