Angular 7 - несколько розеток: ошибка: невозможно активировать уже активированную розетку

Проблема возникает при ленивой загрузке дочерних маршрутов. Вы должны вручную деактивировать розетку каждый раз, когда меняете маршрут.

Я изменил ваш AdministrationComponent на обходной путь, как показано ниже. На данный момент он должен работать, пока Angular не найдет способ решить проблему.

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

Это может быть глупо, но для тех, кто ищет решение этой проблемы: Убедитесь, что ни в одном из внутренних или дочерних выходов нет неопределенной переменной.

Я исправил это в своем проекте, и все вернулось в норму.

Моя проблема: По сути, мой именованный выход не деактивировался, в моем случае я бы использовал его для множества разных модальных окон, и хотя ручная деактивация моего модального выхода работала, она не работала при загрузке другого пути и того же компонента в выход, поэтому я не мог переработайте мой компонент, в моем случае модальный компонент.

Итак, как указал @Andreas здесь (https://github.com/angular/angular/issues/20694#issuecomment-595707956). У меня не было назначенных компонентов для пустого пути, поэтому я предполагаю, что из-за этого он не мог каким-то образом деактивировать выход, поэтому я просто назначил пустой компонент для пути: "".

Первый способ: чтобы исправить это, я буду использовать пустой компонент для "" или неправдивых маршрутов.

app-router-module.ts
...
 {
    outlet: "modal",
    path: "", 
    component: EmptyComponent, 
  },
...

Другой способ: если вы хотите, вы можете сделать это вместо закрытия представления

model.component.ts

this.router.navigate([
  {
    outlets: {
      modal: null,
    },
  },
]);

в любом случае маршрутизатор деактивируется, а еще лучше, я думаю, вам следует использовать второй пример, поскольку он деактивирует и уничтожает представление. в моем случае у меня был json с неправдивыми маршрутами, поэтому мне просто нужно было сопоставить их с нулевыми значениями.

Тщательно проверьте, импортировали ли вы модуль с ленивой загрузкой в его родительский модуль или какой-либо другой модуль независимо от маршрутизации. Если да, то удалить его импорт оттуда. Так было в моем случае.

Моя проблема заключалась в том, что у меня есть защита входа, которая выполняет перенаправление через this.router.navigate, а защита возвращала true после перенаправления.

Когда я изменил код для возврата false в случае перенаправления, проблема исчезла.