perf(angular): views are not moved on mount

[liamdebeasi]

Issue number: resolves #28534

---

What is the current behavior?

Page views in Ionic need to be rendered as a child of ion-router-outlet in 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 was ion-router-outlet (the host element). This meant that page views were mounted as siblings of ion-router-outlet. We then added code to move the component inside of ion-router-outlet.

This caused two issues:

1. A DOM tree mismatch during hydration (the linked issue) because hydration is expecting the page view to be a sibling of the router outlet, but Ionic moves the view around in the DOM.
2. A performance issue where all components effectively have connectedCallback fired twice. This callback runs when the component is added to the DOM. On initial mount, connectedCallback for each component runs. Once the page view is moved, the elements are removed from the DOM (thus causing disconnectedCallback to run), and then added to the correct location in the DOM which causes connectedCallback to run again.

What is the new behavior?

• IonRouterOutlet now renders a ng-container. This appears as a comment in the DOM inside of ion-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 of ion-router-outlet then the views themselves are inside of ion-router-outlet too.

Does this introduce a breaking change?

• Yes
• No

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:

1. Clone and install dependencies for https://github.com/bashoogzaad/ionic-ssr-test
2. Run npm run dev:ssr.
3. Open app in a browser. Observe that error noted in bug: angular, moving elements inside of ion-router-outlet causes dom tree mismatch during hydration #28534 (comment) appears.
4. Install dev build.
5. Run 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.

[thetaPC]

LGTM, verified that it fixes the issue. Suggestions given.

[thetaPC]

Should it mention that it needs to be added as a child due to animations? It could make it easier for future debugging.

[liamdebeasi]

Good idea. Added in d32f66e