Angular 7 - Multiple outlets : Error: Cannot activate an already activated outlet - angular7

Question

Here is the issue that I'm encountering with Angular 7 :
I have two outlets : the main app router outlet, and a secondary outlet named 'administration'.
When I want to navigate through any administration link at start, it works fine. But next time, when I try to navigate, angular throws this error message :
Error: Cannot activate an already activated outlet
So, can someone explain me why ? I haven't found any solution on forums...
Here is a stackblitz : https://stackblitz.com/edit/angular-osnnd4
Thank you all everybody :)

Answer 1

The problem occurs when lazyloading child routes. You have to manually deactivate the outlet everytime you change a route.
I have modified your AdministrationComponent to workaround as follow. It should be able to work for now, until Angular have a way to solve the problem.
import { Component, OnInit, ViewChild } from '#angular/core';
import { RouterOutlet, Router, ActivationStart } from '#angular/router';
#Component({
selector: 'app-administration',
templateUrl: './administration.component.html',
styleUrls: ['./administration.component.css']
})
export class AdministrationComponent implements OnInit {
#ViewChild(RouterOutlet) outlet: RouterOutlet;
constructor(
private router: Router
) { }
ngOnInit(): void {
this.router.events.subscribe(e => {
if (e instanceof ActivationStart && e.snapshot.outlet === "administration")
this.outlet.deactivate();
});
}
}

Answer 2

This might be silly, but for anyone looking for a solution to this:
Make sure that in there's no undefined variable in any of the inner or children outlets.
I fixed this in my project and everything is back to normal.

Answer 3

My problem:
Basically my named outlet wasnt deactivating, in my case I would use it for a bunch of different modals, and while manually deactivating my modal outlet would work, it didnt work when loading a different path and the same component into the outlet so I could not recycle my componet, in my case the modal component.
So as pointed by #Andreas in here (https://github.com/angular/angular/issues/20694#issuecomment-595707956). I didn't have any asigned components for an empty path, so I am guessing it couldnt deactivate the outlet somehow because of that, so I just asigned an emptyComponent for path: "".
The first way: to fix this I will be using an empty component for "" or non truthy routes
app-router-module.ts
...
{
outlet: "modal",
path: "",
component: EmptyComponent,
},
...
Another way: If you want, you can do this instead when closing a view
model.component.ts
this.router.navigate([
{
outlets: {
modal: null,
},
},
]);
either way the router deactivates, better yet I think you should use the second example as it deactivates and destroys the view. in my case I had a json with non truthy routes so I just had to map those to null values.

Answer 4

Check thoroughly if you have imported a lazy-loaded module in its parent module or some other module irrespective of the routing. If so, remove its import from there.
That was it in my case.

Answer 5

My problem was that I have a login guard which performs a redirect via this.router.navigate, and the guard was returning true after redirects.
When I changed the code to return false in the case of a redirect, the issue has been gone.