Angular 5 - "Error: Cannot activate an already activated outlet" when named outlets are used in children

See original GitHub issue

I’m submitting a…


[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

As stated here on stackoverflow when you have a routing configuration like:

export const routes = [
{
    path: '',
    component: IndexComponent, 
    children: [
        {
            path: 'home',
            children: [
                { path: '', component: FirstComponent, outlet: 'first', data: { state: 'a' } },
                { path: '', component: SecondComponent, outlet: 'second', data: { state: 'b' } }
            ]
        },
        {
            path: 'about', 
            children: [
                { path: '', component: FirstComponent, outlet: 'first', data: { state: 'b' } },
                { path: '', component: SecondComponent, outlet: 'second', data: { state: 'a' } }
            ]
        }
    ]
}

And you are navigating from /home to /about using a link <a routerLink="['/about']">about</a> it throws the following error:

ERROR Error: Uncaught (in promise): Error: Cannot activate an already activated outlet
Error: Cannot activate an already activated outlet

Expected behavior

The expected behavior would be that it navigates to /about and the router populates the named outlets with the new components (taking internally care of deactivation/activation of outlets).

Minimal reproduction of the problem with instructions

Just a simple app, with routing a named outlets with the configuration above.

What is the motivation / use case for changing the behavior?

It’s a show stopper.

Environment


Angular version: 5.0.3


Browser:
- [x] Chrome (desktop) version XX
- [x] Chrome (Android) version XX
- [x] Chrome (iOS) version XX
- [x] Firefox version XX
- [x] Safari (desktop) version XX
- [x] Safari (iOS) version XX
- [x] IE version XX
- [x] Edge version XX
 
Others:

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Reactions:35
  • Comments:43 (3 by maintainers)

github_iconTop GitHub Comments

25reactions
JHinWcommented, Apr 23, 2018

…Ah, Do not add <route-outlet></route-outlet> to any Structural Directive(such as ngIF), angular cannot deactivate <route-outlet/> if it is not rendered 😆

17reactions
Riobecommented, Dec 18, 2017

We’ve adopted angular at my place of work, and we’re relying on this technique for routing because we don’t want to embed router-outlet information into the url. Until this works we’ll have to rely on a fork of @angular/router that has the fix in the pull request in it to keep moving forward.

I guess it’s a more involved way of +1’ing, but I just want it clear that there are others that need this fix too.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Angular 7 - Multiple outlets : Error: Cannot activate an already ...
The problem occurs when lazyloading child routes. You have to manually deactivate the outlet everytime you change a route.
Read more >
Angular — dynamic modules with named router outlet
The often recommended workaround is to deactivate an outlet on every route change, but I found a simpler way. Just keep one outlet...
Read more >
Error: Cannot activate an already activated outlet - Ionic Forum
Hello, it shocks me when I'm running on Android platform the app with ionic 4, it works perfectly, but when i run it...
Read more >
RouterOutlet - Angular
A router outlet emits an activate event when a new component is instantiated, deactivate event when a component is destroyed.
Read more >
Angular Router: Child Routes, Auxiliary Routes, Master Detail
This is a comprehensive guide to the fundamental concepts of the Angular Router: routes, paths, components, outlets. We will cover both child ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found