Sub Child routes not working in angular 6

The structure of my app is:

1. src
2. dashboard(main component)
3. department(child component)

4. add(sub child component)

   const r: Routes = [
     { path: "", redirectTo:'/dashboard' ,pathMatch: 'full'},
     { path: "dashboard", component: DashboardComponent, loadChildren:'./dashboard/dashboard.module#DashboardModule' },
     { path: "Top-nav", component: TopNavComponent },
     { path: "boxed", component: BoxedComponent },
     { path: "fixed", component: FixedComponent },
     { path: "collapse", component: CollapsedSidebarComponent },
      ];
   

In app.module.ts, I added RouterModule.forRoot(r), Here is code for dashboard.routing.module:

const routes: Routes = [
    { path: 'dashboard', component: DashboardComponent, children: [
            { path: "", component: LoginComponent },
            { path: "Calender", component: CalenderComponent },
            { path: "MailBox", component: MailBoxComponent },
            { path: "compose", component: ComposeComponent },
            { path: "Read", component: ReadMailComponent },
            { path: "tables", component: TablesComponent },
            { path: "simpleTables", component: SimpleTablesComponent },
            { path: "dataTables", component: DataTablesComponent },
            { path: "register", component: RegisterComponent },
            { path: "dash-panel", component: DashboardPanelComponent },
            {path : 'department', component: DepartmentComponent}
          ]
}
];

@NgModule({
  imports: [
    RouterModule.forChild(routes),
    FormsModule,
    ReactiveFormsModule,
  ],

Here is for department.routing.module

const routes: Routes = [
  { path: "", redirectTo: "department", pathMatch: 'full' },
  {
    path: "department", component: DepartmentComponent, 
    children: [
      { path: 'add', component: AddComponent },
      { path: 'edit/:id', component: AddComponent },
      { path: 'view/:id', component: ViewComponent },
    ]
  }
];
@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})

If I render htttp:localhost:4200/dashboard/department, it works fine but if I render htttp:localhost:4200/dashboard/department/add, i am getting error as:

core.js:1673 ERROR Error: Uncaught (in promise): Error: Component DashboardComponent is not part of any NgModule or the module has not been imported into your module.
Error: Component DashboardComponent is not part of any NgModule or the module has not been imported into your module.
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._createCompiledHostTemplate (compiler.js:23968)
    at compiler.js:23944
    at Array.forEach (<anonymous>)
    at compiler.js:23941
    at Array.forEach (<anonymous>)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileComponents (compiler.js:23930)
    at compiler.js:23858
    at Object.then (compiler.js:1012)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents (compiler.js:23857)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler.compileModuleAsync (compiler.js:23817)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._createCompiledHostTemplate (compiler.js:23968)
    at compiler.js:23944
    at Array.forEach (<anonymous>)
    at compiler.js:23941
    at Array.forEach (<anonymous>)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileComponents (compiler.js:23930)
    at compiler.js:23858
    at Object.then (compiler.js:1012)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents (compiler.js:23857)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler.compileModuleAsync (compiler.js:23817)
    at resolvePromise (zone.js:814)
    at resolvePromise (zone.js:771)
    at zone.js:873
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:3811)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)
    at drainMicroTaskQueue (zone.js:595)