Angular 5 - "Error: Cannot activate an already activated outlet" when named outlets are used in children
See original GitHub issueI’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:
- Created 6 years ago
- Reactions:35
- Comments:43 (3 by maintainers)
Top 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 >
Top Related Medium Post
No results found
Top Related StackOverflow Question
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
…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 😆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.