perf(angular): views are not moved on mount #28544
Merged
Conversation
This file contains 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
liamdebeasi
changed the title
thetaPC
approved these changes
Jan 5, 2024
| cmpRef = this.activated = this.location.createComponent(component, { | ||
| index: this.location.length, | ||
| /** | ||
| * View components need to be added as a child of ion-router-outlet. |
There was a problem hiding this comment.
Should it mention that it needs to be added as a child due to animations? It could make it easier for future debugging.
There was a problem hiding this comment.
Good idea. Added in d32f66e
packages/angular/src/directives/navigation/ion-router-outlet.ts
Outdated
Show resolved
Hide resolved
Co-authored-by: Maria Hutt <thetaPC@users.noreply.github.com>
Co-authored-by: Maria Hutt <thetaPC@users.noreply.github.com>
sean-perkins
approved these changes
Jan 8, 2024
3 tasks
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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: resolves #28534
What is the current behavior?
Page views in Ionic need to be rendered as a child of
ion-router-outletin order for page transitions and swipe to go back to function correctly. However, Angular always inserts components as siblings of the insertion point. Previously, the insertion point wasion-router-outlet(the host element). This meant that page views were mounted as siblings ofion-router-outlet. We then added code to move the component inside ofion-router-outlet.This caused two issues:
connectedCallbackfired twice. This callback runs when the component is added to the DOM. On initial mount,connectedCallbackfor each component runs. Once the page view is moved, the elements are removed from the DOM (thus causingdisconnectedCallbackto run), and then added to the correct location in the DOM which causesconnectedCallbackto run again.What is the new behavior?
ng-container. This appears as a comment in the DOM inside ofion-router-outlet. This comment is used as the injection point for adding new views. The new views are added as siblings of the comment, but since the comment is inside ofion-router-outletthen the views themselves are inside ofion-router-outlettoo.Does this introduce a breaking change?
This doesn't cause any known breaking changes. However, the placement of views is pretty critical to the functionality of Ionic, so I wanted to ship this in a major release so we have a solid public testing period before the code is considered stable.
We already have test coverage that verifies page views are mounted in the correct order, so I did not add more tests for this.
Other information
Dev build: 7.6.2-dev.11704390532.1202188d
Testing:
npm run dev:ssr.npm run dev:ssr. Observe that the error noted in the original issue does not appear.Note: The Angular SSR package does not support Web Components. As a result, there are other errors you will encounter. However, I still think it's worth fixing this issue a) in the event that the Angular SSR package adds support for Web Components and b) to get the performance gain of not having to re-mount components.