Why is my router-outlet not working on a Angular CLI project?

Question

First time using Angular CLI and im new to type script.

I'm having a problem getting working a basic CLI generated the angular project.

Basically the <router-outlet></router-outlet> is not filling with any content.

The following is my code. If the problem is found and explanined it would be appreciated...

+ app
|- app-routing.module.ts
|- app.component.css
|- app.component.html
|- app.component.spec.ts
|- app.component.ts
|- app.module.ts
|-+ homepage
  |- homepage-routing.module.ts
  |- homepage.module.ts
  |-+ home
    |- home.component.css
    |- home.component.html
    |- home.component.spec.ts
    |- home.component.ts

home.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

homepage-routing.module.ts

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

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

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

homepage.module.ts

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

import { HomepageRoutingModule } from './homepage-routing.module';
import { HomeComponent } from './home/home.component';
// import { FooterComponent } from './footer/footer.component';

@NgModule({
  declarations: [HomeComponent],
  imports: [
    CommonModule,
    HomepageRoutingModule
  ]
})
export class HomepageModule { }

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  {path : 'home', loadChildren : './homepage/homepage.module'},
  {path : '', redirectTo : '/home', pathMatch : 'full'}  
];

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

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html

<p>Application loaded</p>
<router-outlet></router-outlet>

home.component.html

<div class="content">
  <h2>
    Home Dashboard
  </h2>
  <section>
    Welcome to the Home component inside the
    Home module.
    Et harum quidem rerum facilis est et expedita distinctio.
    Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil 
    impedit quo minus id quod maxime placeat facere possimus, 
    omnis voluptas assumenda est, omnis dolor repellendus. 
    Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus 
    saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. 
  </section>
</div>

Answer 1

You are missing the module name here:

{path: 'home', loadChildren : './homepage/homepage.module'}

Change to:

{path: 'home', loadChildren : './homepage/homepage.module#HomepageModule'}

Answer 2

Use this syntax:

{
    path : 'home',
    loadChildren : './homepage/homepage.module#HomepageModule',
},

Answer 3

You should import the HomepageModule into your AppModule

import { HomepageModule } from './homepage/homepage.module';

@NgModule({

  imports: [
    BrowserModule,
    AppRoutingModule,
    HomepageModule 
  ],
  ...
})
export class AppModule { }