Angular 7 - Multiple outlets : Error: Cannot activate an already activated outlet
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();
});
}
}
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.
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.