Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Router throws 'Cannot activate an already activated outlet' when lazy loaded module fails and tries to navigate to another route. #29303

DanPinzaru opened this Issue Mar 14, 2019 · 0 comments


None yet
2 participants
Copy link

DanPinzaru commented Mar 14, 2019

馃悶 bug report

Affected Package

The issue is caused by package @angular/router

Is this a regression?



A lazy loaded route with a path of 'users' is a child route of a 'dashboard' router state.
If the URL 'http:://app-name/dashboard/users' is navigated from the browser window (not programatically) and an uncaught error is triggered (in my case I forgot to register a service), the router is unable to navigate anywhere else afterwards. In my case I have a custom error handler where I attempt to bring the user to an error page, when trying to navigate to the error page another error is thrown:

Error: Cannot activate an already activated outlet.

I believe this happens because the users route is a lazy loaded child route of
the dashboard route which is not lazy loaded. It seems that the directive
responsible for attaching the dashboard (default) component is not deactivated if building
the lazy loaded module fails.

A snippet of my routes config:

   path: 'dashboard',
   component: DefaultPageComponent,
   children: [{
       path: 'home',
       loadChildren: './home/home.module#HomeModule'
  }, {
       path: 'users',
       loadChildren: './users/users.module#UsersModule

My guess that the parent DefaultPageComponent is involved is based on me trying to
deliberately invoke the same error on a lazy loaded route that did NOT have a parent route,
the intentional error was thrown and my custom error handler was able to navigate to the
error route successfully.

Link to stackblitz repo is below. Please note that this happens only
when visiting the lazy loaded route directly from browser's address bar so after
opening the stackblitz, please change the URI to /dashboard/users. When navigating to the failing /dashboard/users programatically (or using routerLink), the error handler
is able to successfully navigate to the error page.

There are ways for me to get around this but it would be nice to have it working without any
messy logic.

Thanks for taking the time!

馃敩 Minimal Reproduction

馃敟 Exception or Error

Error: Uncaught (in promise): Error: Cannot activate an already activated outlet
Error: Cannot activate an already activated outlet
    at RouterOutlet.activateWith (router_outlet.ts:127)
    at ActivateRoutes.activateRoutes (activate_routes.ts:187)
    at eval (activate_routes.ts:133)
    at Array.forEach ()
    at ActivateRoutes.activateChildRoutes (activate_routes.ts:132)
    at ActivateRoutes.activate (activate_routes.ts:42)
    at MapSubscriber.eval [as project] (activate_routes.ts:27)
    at MapSubscriber._next (map.ts:84)
    at (Subscriber.ts:99)
    at TapSubscriber._next (tap.ts:125)
    at resolvePromise (zone.js:831)
    at resolvePromise (zone.js:788)
    at eval (zone.js:892)
    at ZoneDelegate.invokeTask (zone.js:423)
    at Object.onInvokeTask (ng_zone.ts:262)
    at ZoneDelegate.invokeTask (zone.js:422)
    at Zone.runTask (zone.js:195)
    at drainMicroTaskQueue (zone.js:601)
    at ZoneTask.invokeTask (zone.js:502)
    at ZoneTask.invoke (zone.js:487)

馃實 Your Environment

Angular Version:


Anything else relevant?

@ngbot ngbot bot added this to the needsTriage milestone Mar 14, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can鈥檛 perform that action at this time.