Angular 2 router, Error: Cannot activate an already activated outlet

Question

I think I can't understand Angular 2 routing at all. I've got this structure in my app:

const routes: Routes = [
    {
        path: 'login',
        component: LoginViewComponent
    },
    {
        path: 'main',
        component: MainComponent,
        children:
        [
            {
                path: 'unit_list',
                component: ListViewComponent
            },
            {
                path: 'unit_info',
                component: UnitInfoComponent,
                children:
                [
                    {
                        path: 'patient',
                        component: PatientDetailsComponent
                    }
                ]
            }
        ]
    },
    {
        path: '',
        redirectTo: 'main',
        pathMatch: 'full'
    }
];

Here is how my app.module is looking:

@NgModule({
    imports: [
        BrowserModule,
        FormsModule,
        HttpModule,
        MainModule,
        routing
    ],
    declarations: [
        AppComponent,
        LoginViewComponent
    ],
    bootstrap: [AppComponent]
})

And main.module

@NgModule({
    imports: [
        CommonModule,
        FormsModule,
        RouterModule
    ],
    declarations: [
        ListViewComponent,
        MainComponent,
        PatientDetailsComponent,
        UnitInfoComponent,
    ]
})

The problem is I can't manage get router.navigateByUrl function to work.

I have ngOnInit() function inside PatientDetailsComponent which checks if patient is null, if is then I call this "this.router.navigateByUrl("/main/unit_info")", but it throws me the error in the title: "Cannot activate an already activated outlet". It was working fine in Angular 2.1.1, but when I upgraded to 2.4.X none seems to fix my problems. I am also not sure if this routing is correct, because I am a little lost.

This is how my whole routing was looking before upgrading to 2.4.X: http://pastebin.com/Y377STcW

Answer 1

This error can be a nasty red herring!

You may see something like this in the Chrome console:

 core.js:1440 ERROR Error: Uncaught (in promise): Error: Cannot
 activate an already activated outlet Error: Cannot activate an already
 activated outlet
     at RouterOutlet.activateWith (router.js:6676)
     at ActivateRoutes.activateRoutes (router.js:5765)
     at eval (router.js:5705)
     at Array.forEach (<anonymous>)
     at ActivateRoutes.activateChildRoutes (router.js:5704)

You'll check your routes and providers and html, and won't find anything wrong.

And then - if you're lucky you'll come across this answer!

And you will scroll up in the console window. And you will see the real error which was pushed off the top of the screen:

core.js:1440 ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'foo' of null
TypeError: Cannot read property 'foo' of null

Then look for the .ts file that corresponds to your component, click on it and it'll take you right to the line of your code with the actual error.

In other words the router cannot survive an error that occurs during construction of your component. The ngInit method may have different results - haven't yet tested. In either case the routing is just fine :-)