Router outlet inside ngIf getting activated with old route #49457

jancabadaj · 2023-03-17T08:46:08Z

Which @angular/* package(s) are the source of the bug?

router

Is this a regression?

No

Description

When child router-outlet is created after route is changed to no longer include this child, then the outlet remains incorrectly activated.

In the example below, parent component initialization takes 1000ms. If router navigates to 'Child' and then back to 'Parent' in lower time (500ms), then router-outlet with child gets activated at 1000ms even though the route was already changed. Since the outlet is activated, navigating back to 'Child' results in exception.

If I change the time from 500ms to more than 1000ms, then child outlet is correctly deactivated.

  breakApp() {
    this.router.navigate([`Parent/Child`], { relativeTo: this.activatedRoute });
    setTimeout(() => {
      this.router.navigate(['Parent'], { relativeTo: this.activatedRoute });
    }, 500);
  }

///////////////////////////////////////////////////

@Component({
  template: `<p>parent</p>
            <div *ngIf="initialized">
              <router-outlet></router-outlet>
            </div>`
})
export class ParentComponent {
  initialized = false;

  ngOnInit(): void {
    setTimeout(() => {
      this.initialized = true;
    }, 1000);
  }
}

///////////////////////////////////////////////////

@Component({
  template: '<p>child</p>',
})
export class ChildComponent { }

///////////////////////////////////////////////////

const routes: Routes = [
  {
    path: '',
    children: [
      {
        path: 'Parent',
        component: ParentComponent,
        children: [
          {
            path: 'Child',
            component: ChildComponent,
          },
        ],
      },
    ],
  },
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule { }

The issue can be seen in provided stackblitz demo. Clicking Break button results in child outlet remaining in activated state. In such state it is not possible to switch between children. After navigating back to root page Parent component gets destroyed and problem is resolved.

Please provide a link to a minimal reproduction of the bug

https://stackblitz.com/edit/angular-dedznl

Please provide the exception or error you saw

Error: NG04013: Cannot activate an already activated outlet

Please provide the environment you discovered this bug in (run `ng version`)

Angular CLI: 15.1.6        
Node: 16.18.1
Package Manager: npm 8.19.2
OS: win32 x64

Angular: 15.2.3
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1502.4
@angular-devkit/build-angular   15.2.4
@angular-devkit/core            15.2.4
@angular-devkit/schematics      15.1.6
@angular/cli                    15.1.6
@schematics/angular             15.1.6
rxjs                            7.8.0
typescript                      4.9.5

Anything else?

No response

The text was updated successfully, but these errors were encountered:

Avoid activating outlet with old info if route was changed before outlet activated

…ld info

Avoid activating outlet with old info if route was changed before outlet activated PR Close #49459

This PR contains the following updates: | Package | Type | Update | Change | |---|---|---|---| | [@angular/animations](https://github.com/angular/angular) | dependencies | patch | [`15.2.4` -> `15.2.5`](https://renovatebot.com/diffs/npm/@angular%2fanimations/15.2.4/15.2.5) | | [@angular/common](https://github.com/angular/angular) | dependencies | patch | [`15.2.4` -> `15.2.5`](https://renovatebot.com/diffs/npm/@angular%2fcommon/15.2.4/15.2.5) | | [@angular/compiler](https://github.com/angular/angular) | dependencies | patch | [`15.2.4` -> `15.2.5`](https://renovatebot.com/diffs/npm/@angular%2fcompiler/15.2.4/15.2.5) | | [@angular/compiler-cli](https://github.com/angular/angular/tree/main/packages/compiler-cli) ([source](https://github.com/angular/angular)) | devDependencies | patch | [`15.2.4` -> `15.2.5`](https://renovatebot.com/diffs/npm/@angular%2fcompiler-cli/15.2.4/15.2.5) | | [@angular/core](https://github.com/angular/angular) | dependencies | patch | [`15.2.4` -> `15.2.5`](https://renovatebot.com/diffs/npm/@angular%2fcore/15.2.4/15.2.5) | | [@angular/forms](https://github.com/angular/angular) | dependencies | patch | [`15.2.4` -> `15.2.5`](https://renovatebot.com/diffs/npm/@angular%2fforms/15.2.4/15.2.5) | | [@angular/platform-browser](https://github.com/angular/angular) | dependencies | patch | [`15.2.4` -> `15.2.5`](https://renovatebot.com/diffs/npm/@angular%2fplatform-browser/15.2.4/15.2.5) | | [@angular/platform-browser-dynamic](https://github.com/angular/angular) | dependencies | patch | [`15.2.4` -> `15.2.5`](https://renovatebot.com/diffs/npm/@angular%2fplatform-browser-dynamic/15.2.4/15.2.5) | --- ### Release Notes <details> <summary>angular/angular</summary> ### [`v15.2.5`](https://github.com/angular/angular/blob/HEAD/CHANGELOG.md#1525-2023-03-29) [Compare Source](angular/angular@15.2.4...15.2.5) ##### common | Commit | Type | Description | | -- | -- | -- | | [ca5acadb78](angular/angular@ca5acad) | fix | invalid ImageKit transformation ([#49201](angular/angular#49201)) | ##### compiler | Commit | Type | Description | | -- | -- | -- | | [077f6b4674](angular/angular@077f6b4) | fix | do not unquote CSS values ([#49460](angular/angular#49460)) | | [c3cff35869](angular/angular@c3cff35) | fix | handle trailing comma in object literal ([#49535](angular/angular#49535)) | ##### core | Commit | Type | Description | | -- | -- | -- | | [d201fc2dec](angular/angular@d201fc2) | fix | set style property value to empty string instead of an invalid value ([#49460](angular/angular#49460)) | ##### router | Commit | Type | Description | | -- | -- | -- | | [978d37f324](angular/angular@978d37f) | fix | Ensure Router preloading works with lazy component and static children ([#49571](angular/angular#49571)) | | [a844435514](angular/angular@a844435) | fix | fix [#49457](angular/angular#49457) outlet activating with old info ([#49459](angular/angular#49459)) | #### Special Thanks Alan Agius, Andrew Scott, Asaf Malin, Jan Cabadaj, Kristiyan Kostadinov, Matthieu Riegler, Paul Gschwendtner, Sid and Tano Abeleyra  </details> --- ### Configuration 📅 **Schedule**: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined). 🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied. ♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about these updates again. --- - [ ] If you want to rebase/retry this PR, check this box --- This PR has been generated by [Renovate Bot](https://github.com/renovatebot/renovate).  Co-authored-by: cabr2-bot <cabr2.help@gmail.com> Reviewed-on: https://codeberg.org/Calciumdibromid/CaBr2/pulls/1842 Reviewed-by: Epsilon_02 <epsilon_02@noreply.codeberg.org> Co-authored-by: Calciumdibromid Bot <cabr2_bot@noreply.codeberg.org> Co-committed-by: Calciumdibromid Bot <cabr2_bot@noreply.codeberg.org>

angular-automatic-lock-bot · 2023-04-22T00:08:54Z

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

pkozlowski-opensource added the area: router label Mar 17, 2023

ngbot bot added this to the needsTriage milestone Mar 17, 2023

jancabadaj added a commit to jancabadaj/angular that referenced this issue Mar 17, 2023

fix(router): fix angular#49457 outlet activating with old info

8225c9e

Avoid activating outlet with old info if route was changed before outlet activated

jancabadaj mentioned this issue Mar 17, 2023

fix(router): fix #49457 outlet activating with old info #49459

Closed

jancabadaj added a commit to jancabadaj/angular that referenced this issue Mar 17, 2023

fixup! fix(router): fix angular#49457 outlet activating with old info

19bbbe1

jancabadaj added a commit to jancabadaj/angular that referenced this issue Mar 17, 2023

fixup! fixup! fix(router): fix angular#49457 outlet activating with o…

6f8c176

…ld info

atscott pushed a commit to jancabadaj/angular that referenced this issue Mar 17, 2023

fixup! fix(router): fix angular#49457 outlet activating with old info

3de42aa

atscott closed this as completed in d3018c0 Mar 22, 2023

atscott pushed a commit that referenced this issue Mar 22, 2023

fix(router): fix #49457 outlet activating with old info (#49459)

a844435

Avoid activating outlet with old info if route was changed before outlet activated PR Close #49459

angular-automatic-lock-bot bot locked and limited conversation to collaborators Apr 22, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Router outlet inside ngIf getting activated with old route #49457

Router outlet inside ngIf getting activated with old route #49457

jancabadaj commented Mar 17, 2023

angular-automatic-lock-bot bot commented Apr 22, 2023

Router outlet inside ngIf getting activated with old route #49457

Router outlet inside ngIf getting activated with old route #49457

Comments

jancabadaj commented Mar 17, 2023

Which @angular/* package(s) are the source of the bug?

Is this a regression?

Description

Please provide a link to a minimal reproduction of the bug

Please provide the exception or error you saw

Please provide the environment you discovered this bug in (run ng version)

Anything else?

angular-automatic-lock-bot bot commented Apr 22, 2023

Please provide the environment you discovered this bug in (run `ng version`)