component is being displayed, but router-outlet is being ignored in Angular

Question

I have a router-outlet in app.component.html, admin.component.html, and manage-users.component.html. For some reason, the router-outlet in the manage-users.component.html is not outputting anything when I navigate to http://localhost:4200/admin/users

The files are structured in the following way:

/Admin (Module)
     admin.component.html (has router-outlet)
     admin.component.ts
     admin.module.ts
     admin-routing.module.ts
     /Manage-Users (Module within Admin module)
          manage-users.component.html (has router-outlet)
          manage-users.component.ts
          manage-users.module.ts
          manage-users-routing.module.ts
          /User-List (just a component to be displayed in manage-users outlet)
          ...
          /User-Detail (just a component to be displayed in manage-users outlet)
          ...

I have 3 levels of routes:

    // App Routes (app-routing.module.ts)
    const appRoutes: Routes = [
      { path: 'admin', loadChildren: './admin/admin.module#AdminModule', canLoad: [AuthGuard] },
      { path: '',   redirectTo: '/login', pathMatch: 'full' },
      { path: '**', component: PageNotFoundComponent }
    ];

    // Admin Module Routes (admin-routing.module.ts)
    const adminRoutes: Routes = [
      {
        path: '',
        component: AdminComponent,
        children: [
          { path: 'users', component: ManageUsersComponent }
        ]
      }
    ];

    // Admin Module > Manage Users Module Routes (manage-users-routing.module.ts)
const manageUsersRoutes: Routes = [
  {
    path: '',
    component: ManageUsersComponent,
    children: [
      {path: '', component: UserListComponent},
      {path: 'edit/:id', component: UserDetailComponent}
    ]
  }
];

Below is what my ManageUsers.module looks like:

@NgModule({
  declarations: [
    ManageUsersComponent,
    UserListComponent,
    UserDetailComponent
  ],
  imports: [
    CommonModule,
    SharedModule,
    ManageUsersRoutingModule
  ],
  providers: [
    UserService
  ]
})
export class ManageUsersModule { }

Below is what my Admin.module looks like:

@NgModule({
  declarations: [
    AdminComponent
  ],
  imports: [
    CommonModule,
    AdminRoutingModule,
    ManageUsersModule
  ]
})
export class AdminModule { }

Answer 1

You need to use the children attribute inside your user routes in order to load components inside that router outlet.

The way you set up your routes is not correct You are using a routing Module for user routes however you import that module outside of UserModule what that actually does is append to the existing routes inside Admin Module.

So this is what is really happening:

const adminRoutes: Routes = [
  {
    path: '',
    component: AdminComponent,
    children: [
      {
        path: '',
        children:
        [
           { path: 'users', component: ManageUsersComponent }
        ]
      }
    ]
  },
    ...manageTenantRoutes   // your routes are being added here
];

One way to fix this is to use lazy loading as you did with you Admin module.

If you want to keep it this way then you have to tell exactly where these routes should be appended.

See the stackblitz for the update

https://stackblitz.com/edit/angular-ryjdxc

But you have to add it like this:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AdminComponent } from './admin.component';
import { ManageUsersComponent } from './manage-users/manage-users.component';

import { manageTenantRoutes } from './manage-users/manage-users-routing.module'
const adminRoutes: Routes = [
  {
    path: '',
    component: AdminComponent,
    children: [
      {
        path: '',
        children:
        [
          ...manageTenantRoutes
        ]
      }
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(adminRoutes)],
  exports: [RouterModule]
})
export class AdminRoutingModule { }

And change your routes to reflect this change

export const manageTenantRoutes: Routes = [
  {
    path: 'users',
    component: ManageUsersComponent,
    children: [
      {path: '', component: UserListComponent},
      {path: 'edit/:id', component: UserDetailComponent}
    ]
  }
];

Hope this clears it up!