Angular6 not navigating on lazy loaded module

Question

Here's my home routes

const homeRoutes: Routes = [
  {
    path: '',
    component: HomeComponent,
    children: [
      {
        path: 'dummy',
        loadChildren: '../dummy/dummy.module#DummyModule'
      }
    ]
  }
];

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

And here's my component route which I want to load

const routes: Routes = [
  {
    path: '',
    component: DummyComponent
  }
];

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

But it not loads my component. Only url is changing

any idea what's going on? there's my folder structure

App.component.html

<div class="row">
  <div class="col-12">
    <router-outlet></router-outlet>
  </div>
</div>

dummy.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { DummyRoutingModule } from './dummy-routing.module';
import { DummyComponent } from './dummy/dummy.component';

@NgModule({
  imports: [
    CommonModule,
    DummyRoutingModule
  ],
  declarations: [DummyComponent]
})
export class DummyModule { }

Answer 1

Update one thing let try this once.And let me know

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { DummyRoutingModule } from './dummy-routing.module';
import { DummyComponent } from './dummy/dummy.component';

@NgModule({
  imports: [
    CommonModule,
    DummyRoutingModule
  ],
  declarations: [DummyComponent],
  exports:[DummyComponent] //added this line newly
})
export class DummyModule { }

Make sure you have entered some data in dummy component.html file

change this also

@NgModule({
  imports: [RouterModule.forRoot(homeRoutes)], //forChild to forRoot
  exports: [RouterModule]
})
export class HomeRoutingModule { }

@cetia said this one.