feat(angular): ship Ionic components as Angular standalone components - #28311
Merged
Conversation
Issue number: N/A --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> IDEs that perform type checking/include a language service will error on the `@ionic/angular/common` import paths and not provide intelisense or auto import detection.  ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - `@ionic/angular/common` import paths are detected by IDEs such as VSCode  ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change, please describe the impact and migration path for existing applications below. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. -->
Issue number: N/A --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> Ionic Framework currently only generates the lazy/hydrated Angular component wrappers for the web components. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Generates Angular standalone component wrappers for the web components, using the CE build. - Adds manual component wrapper for `ion-icon` with the CE build. - Migrates the `ion-back-button` and `ion-nav` to be manual component wrappers - Continues to generate the lazy/hydrated Angular component wrappers. - Refactors "NavDelegate" etc. language to `IonNav` to avoid exporting as and simplify navigating the code. ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change, please describe the impact and migration path for existing applications below. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> Related output targets PR: stenciljs/output-targets#367
Issue number: N/A --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? Tabs cannot be used as a standalone component. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Added tabs as a standalone component. - Added a quick test. I included the event checking from the lazy test in the HTML as a smoke check, but didn't bring over the Cypress tests for them since I noticed the other standalone tests have been quick, stripped down affairs. I'm assuming I would just be duplicating effort. Let me know if I should bring more tests over from the lazy version, or even get rid of the event logging from the standalone HTML. ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change, please describe the impact and migration path for existing applications below. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. -->
chore: sync with main
) Issue number: N/A --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> Ionic standalone form controls cannot participate in Angular forms. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Ionic form controls can participate in Angular forms by importing the standalone component - Applies to: `ion-input`, `ion-textarea`, `ion-searchbar`, `ion-toggle`, `ion-checkbox`, `ion-segment`, `ion-radio`, `ion-radio-group`, `ion-datetime` and `ion-range`. - Refactors `ValueAccessor` from `@ionic/angular` to `@ionic/angular/common` - Refactors `raf` utility from `@ionic/angular` to `@ionic/angular/common` ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change, please describe the impact and migration path for existing applications below. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> ---------
chore: sync with main
chore: sync with feature-7.5
liamdebeasi
changed the title
github-actions
Bot
added
package: core
liamdebeasi
marked this pull request as ready for review
October 9, 2023 19:40
liamdebeasi
requested review from
averyrousseau,
sean-perkins and
thetaPC
as code owners
October 9, 2023 19:40
liamdebeasi
marked this pull request as draft
October 9, 2023 19:41
github-actions
Bot
removed
package: vue
liamdebeasi
marked this pull request as ready for review
October 9, 2023 20:32
thetaPC
requested changes
Oct 9, 2023
Contributor
There was a problem hiding this comment.
Should this file be deleted since it's empty?
Contributor
Author
There was a problem hiding this comment.
Not sure what you mean - the file was deleted in the diff?
Contributor
There was a problem hiding this comment.
It's showing as an empty file instead of a deleted one.
Contributor
Author
There was a problem hiding this comment.
The red means that it was deleted. The file that was deleted was empty though. The app.component.ts diff also shows that we removed a reference to the file: https://github.com/ionic-team/ionic-framework/pull/28311/files#diff-f489c71da69710fe7957173822f2d6e8dea4bb8660b6bd44ed2efa41ecd8accb
Contributor
Author
There was a problem hiding this comment.
Screenshot of the linked diff since GitHub didn't always load it on my end:
Contributor
There was a problem hiding this comment.
Ah, that makes sense. Thank you!
sean-perkins
approved these changes
Oct 10, 2023
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Issue number: N/A
What is the current behavior?
1. Bundle Size Reductions
All Ionic UI components and Ionicons are added to the final bundle of an Ionic Angular application. This is because all components and icons are lazily loaded as needed. This prevents the compiler from properly tree shaking applications. This does not cause all components and icons to be loaded on application start, but it does increase the size of the final app output that all users need to download.
Related Issues
ionic-team/ionicons#910
ionic-team/ionicons#536
#27280
#24352
2. Standalone Component Support
Standalone Components are a stable API as of Angular 15. The Ionic starter apps on the CLI have NgModule and Standalone options, but all of the Ionic components are still lazily/dynamically loaded using
IonicModule. Standalone components in Ionic also enable support for new Angular features such as bundling with ESBuild instead of Webpack. ESBuild does not work in Ionic Angular right now because components cannot be statically analyzed since they are dynamically imported.We added preliminary support for standalone components in Ionic v6.3.0. This enabled developers to use their own custom standalone components when routing with
ion-router-outlet. However, we did not ship standalone components for Ionic's UI components.Related Issues
#25404
#27251
#27387
3. Faster Component Load Times
Since Ionic Angular components are lazily loaded, they also need to be hydrated. However, this hydration does not happen immediately which prevents components from being usable for multiple frames.
Related Issues
#24352
#26474
What is the new behavior?
Does this introduce a breaking change?
Other information
Associated documentation branch: https://github.com/ionic-team/ionic-docs/tree/feature-7.5