Angular 6 Unexpected behavior when getting access to child component of a parent component using lazy laoding

Question

I am working on a registration system using Angular 6. The base AppModule contains the following routes and they are working properly:

const routes: Routes = [
  {
    path: 'login',
    component: LoginComponent
  },
  {
    path:'',
    component: LoginComponent
  },
  {
    path: 'forgot',
    component: ForgotPasswordComponent
    //canActivate: [AuthGuardService]
  },
  {
    path:'dashboard',
    loadChildren: '../app/dashboard/dashboard.module#DashboardModule'

  },
  {
    path: '**',
    redirectTo: 'login',
    pathMatch: 'full'
  }
];

As you can see, I am using the lazy loading concept, where I created a new module and component called dashboard , containing the routes script dashboard-routing.module.ts :

const routes: Routes = [
  {
    path:'',
    component: DashboardComponent,
  },
  {
    path:'home',
    loadChildren: './main-navbar/main-navbar.module#MainNavbarModule'

  },
  {
    path:'**',
    redirectTo: '',
    pathMatch: 'full'
  }
];

As you can see again, I am using lazy loading again inside the dashboard component, and inside of it, I created the final module/component called main-navbar.component wherein this part, all other after login component will be executed.

The structure is now like the following:

Here is a plunker to check it .

And for the simplicity, I removed the login and forgot password components, so you can check the dashboard component directly .

What's going wrong is described like the following:

When logged in, the user will see the following URL properly with no errors:

localhost:4200/dashboard

Where the dashboard contains the component of main-navbar :

Now I need to display the other components inside this page, so if the URL is:

localhost:4200/dashboard/home

I am redirected to the login component and get no errors. I think the problem is in how I am handling the routing files, and where I am putting the <router-outlet> elements, but can't figure it out.

Answer 1

Try this in dashboard-routing.module.ts:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { DashboardComponent } from './dashboard.component';

const routes: Routes = [
  {
    path: 'dashboard',
    component: DashboardComponent,
    children: [
      { path: '', redirectTo: 'home', pathMatch: 'full' },
      {
        path: 'home',
        loadChildren: './main-navbar/main-navbar.module#MainNavbarModule'

      }
    ]
  }
];

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