带有辅助路线的Angular 4功能模块

Question

I have been staring at this for a few hours now and I cannot seem to understand what I am doing wrong. Here is my scenario: I have an Angular 4 application that has a main module and an admin module, which I am loading lazily. I would like to define another router in the template of the Admin component where I can load all the auxiliary routes for the admin functionality.

Here is my app.module route configuration:

const routes: Routes = [
    { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
    { path: 'home', component: HomeComponent },
    {
        path: 'dashboard', component: DashboardComponent, canActivate: [CanActivateGuard]
    },
    { path: 'admin', loadChildren: '/app/components/admin/admin.module#AdminModule', canActivate: [AdminGuard] },
    { path: '**', redirectTo: 'dashboard' }
];

and the admin.module:

const routes: Routes = [
    {
        path: '', component: AdminDashboardComponent, children: [
            { path: 'employees', component: EmployeeManagerComponent, outlet: 'admin' }
        ]
    }
]

In the adminDashboard.html I have defined the named router as:

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

and I also have a link defined as:

<a [routerLink]="[{ outlets: { 'admin': ['employees']}}]">Employee Manager</a>

When I navigate to the admin dashboard, the module is loaded and the dashboard is displayed. When I click on the link to load the EmployeeManagerComponent into the named router nothing happens. The url changes to localhost:5000/admin/(admin:employees), but the EmployeeManagerComponent is not displayed. No errors are recorded in the console.

I am missing something, but I cannot figure out what.

Thank you for your help.

Answer 1

So, after some trial and error, it turns out that I did not need to name the router-outlet in the lazily loaded adminDashboard component. It appears that Angular is smart enough to figure out that the child routes in the module will be placed in the outlet that is closest to the main component in the module.

So, just removing the name and setting the links as

<a [routerLink]="['employees']">Employees</a>

did the trick.