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

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\'.

W

Answer 1

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 2

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 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: "".

This would be my router constant:

 {
    outlet: "modal",
    path: "",
    component: EmptyComponent,
  },

Answer 3

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();
    });
  }
}