[angular 9] child pages initially added to incorrect container element in Ionic Angular apps

🐞 bug report

Affected Package

The issue is caused by package @angular/routing

Is this a regression?

Yes, the previous version in which this bug was not present was: Angular 8.x

Description

We are running into an issue with navigation on Angular 9. It seems that after the upgrade, Angular is inserting pages into the wrong container component. We have the following DOM layout:

app-root (the main component for the Angular app)
|
|_____ion-app (a web component that manages Ionic utilities)
|     |
|_____|_____ion-router-outlet (a web component that is a wrapper around Angular's router outlet)
|     |     |
|_____|_____|_____app-home (the main page of our application)

Clicking a button in app-home navigates you to app-child. In Angular <=8, this child page is added as a child inside of ion-router-outlet. With Angular 9, this page is initially added as child of ion-app, and then re-added as a child of ion-router-outlet . This is causing issues with our users’ apps as certain components no longer work on subsequent navigations to the child page.

🔬 Minimal Reproduction

Angular 8 repro: https://github.com/liamdebeasi/ng8-routing-repro Angular 9 repro: https://github.com/liamdebeasi/ng9-routing-repro

Please see repo README files for steps to reproduce.

🌍 Your Environment

Angular Version:

Angular CLI: 9.0.1
Node: 10.15.0
OS: darwin x64

Angular: 9.0.0
... common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.801.3
@angular-devkit/build-angular     0.900.1
@angular-devkit/build-optimizer   0.900.1
@angular-devkit/build-webpack     0.900.1
@angular-devkit/core              9.0.1
@angular-devkit/schematics        9.0.1
@angular/cli                      9.0.1
@ngtools/webpack                  9.0.1
@schematics/angular               8.1.3
@schematics/update                0.900.1
rxjs                              6.5.4
typescript                        3.7.5
webpack                           4.41.2

Anything else relevant?

This is an Ionic Framework v5 application, but we have not changed anything related to our routing setup with regards to Angular 9.

[atscott]

Yes, this is related to the last bullet point in the breaking changes:

Embedded views (such as ones created by *ngFor) are now inserted in front of anchor DOM comment node (e.g. ) rather than behind it as was the case previously. In most cases this does not have any impact on rendered DOM. In some cases (such as animations delaying the removal of an embedded view) any new embedded views will be inserted after the embedded view being animated away. This difference only last while the animation is active, and might alter the visual appearance of the animation. Once the animation is finished the resulting rendered DOM is identical to that rendered with View Engine.

It has to do with the indexes of the ViewContainerRef and how it determines siblings. https://github.com/ionic-team/ionic/blob/master/angular/src/directives/navigation/ion-router-outlet.ts#L201. But essentially if you’re moving nodes around yourself, it could coincidentally work with a current implementation and then break if we change how we track nodes.

[angular-automatic-lock-bot[bot]]

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