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

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

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

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

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

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

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

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

model.component.ts

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

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

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