Cannot find named outlet to load component

Question

//EDIT 2: As of Angular 4, it seems like this has been fixed/revised. Currently I am able to define named outles 'inside' of an unnamed outlet

//EDIT: As @Michelangelo pointed out, this seems to be a 'design choice'/bug related to the Angular Router. As a workaround I am dynamically injecting the user-edit.component into user-list with the current user.
See https://angular.io/docs/ts/latest/cookbook/dynamic-component-loader.html for more information on that.

I have the following setup:

{
        path: 'admin',
        canActivate: [ AuthGuard, PermissionGuard ],
        children: [ 
            { 
                path: '', 
                component: UserListComponent,
                resolve: {
                    users: UsersResolver
                }
            },
            {
                path: ':id',
                component: UserEditComponent,
                outlet: 'admin'
            }
        ]
    }

The outlet looks like:

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

And I try to navigate with:

this.router.navigate(['/admin', {outlets: {'admin': [user.id]}}]);

If I try to navigate to that route without specifying an outlet, it works fine. But as soon as I try to use a named router outlet it breaks.

Error: Cannot find the outlet admin to load 'UserEditComponent'

score 0 · Answer 1 · edited May 23 '17 at 12:17

Ok, not really an answer for your problem, but I faced the same issue and I ended up not going for named outlets because of this problem. If you search the web you are not the only one with this problem.

Looks like routing for Angular 2 still has to fix basic stuff that used to work good in AngularJS 1.x

What I did was show and hide elements from the application based on the current path, see my answer here: https://stackoverflow.com/a/41684866/4194436

"[..] requires a breaking change." The workaround may break my existing code.. Nevermind, thanks for sharing your approach! — , Feb 08 '17 at 13:44

Cannot find named outlet to load component

1 Answers1