CODEWITHSUNDEEP
angular7childrenrouter-outletrouterlink
Anthony Coucke
Anthony Coucke

Reputation: 301

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

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 :)

Upvotes: 29

Views: 59210

Answers (8)

Duane Wagner
Duane Wagner

Reputation: 41

In my case, I had used the IDE to implement ngOnInit method. I forgot to change it from the default method which was throwing a not implemented exception.

Upvotes: 0

Matthew Marichiba
Matthew Marichiba

Reputation: 2092

This is very uncommon, but if your app-routing.module declares a custom provider for RouteReuseStrategy as shown below, you probably should look in your custom route reuse class. (And may heaven help you! That stuff is really complex.)

@NgModule({
    imports: [ ... ],
    exports: [RouterModule],
    providers: [
        { provide: RouteReuseStrategy, useClass: CustomRouteReuseStrategy } // <=== This
    ]
})

I was just ran into an issue with Error: Cannot activate an already activated outlet, and none of the solutions here helped. Then I realized that my app has a custom routing strategy that does "clever" custom things with the outlets during navigation. It was a real pain to debug.

Upvotes: 0

Gabriel Messas
Gabriel Messas

Reputation: 417

My problem stopped when I created a specific submodule for the pages I was trying to reference and imported Angular Router as RouterModule.forChild(routes).

Now, the outlets are being deactivated as they should.

Upvotes: 0

satanTime
satanTime

Reputation: 13574

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.

Upvotes: 0

Miguel Angel Romero Hernandez
Miguel Angel Romero Hernandez

Reputation: 121

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.

Upvotes: 5

Dikshit Sharma
Dikshit Sharma

Reputation: 65

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.

Upvotes: 1

B. Le&#243;n
B. Le&#243;n

Reputation: 549

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.

Upvotes: 28

Lee GuoHong
Lee GuoHong

Reputation: 336

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

Upvotes: 31

Related Questions