Angular 4 Error: Cannot activate an already activated outlet

user_521392 0
Viewed 3125

I know there are already a few questions across SO concerning to this error, but none with any insightful answers.

I have 2 side-by-side components, and I am trying to animate their widths when navigating between routes. My route config looks like this:

export const routes = [
{ path: '', component: IndexComponent, children:
    [
        { path: 'home', children:
            [
                { path: '', component: FirstComponent, outlet: 'first', data: { state: 'a' } },
                { path: '', component: SecondComponent, outlet: 'second', data: { state: 'b' } }
            ]
        },
        { path: 'about', children:
            [
                { path: '', component: FirstComponent, outlet: 'first', data: { state: 'b' } },
                { path: '', component: SecondComponent, outlet: 'second', data: { state: 'a' } }
            ]
        }
    ]
}

];

But it is telling me the outlet is already activated- with the titular error.

Perhaps someone can tell me if there is something obviously wrong with the above code? If not, I guess the problem lies elsewhere...

Thanks

angular
2 Answers

The trick around this is to have your first <router-outlet></router-outlet> unnamed and have your second one named as usual

Template

<router-outlet></router-outlet>

<router-outlet name="second"></router-outlet>

Code

export const routes = [
{ path: '', component: IndexComponent, children:
    [
        { path: 'home', children:
            [
                { path: '', component: FirstComponent, data: { state: 'a' } },
                { path: '', component: SecondComponent, outlet: 'second', data: { state: 'b' } }
            ]
        },
        { path: 'about', children:
            [
                { path: '', component: FirstComponent, data: { state: 'b' } },
                { path: '', component: SecondComponent, outlet: 'second', data: { state: 'a' } }
            ]
        }
    ]
}

Original: https://github.com/angular/angular/issues/20694#issuecomment-364446781

user_38672880
Related