Почему мой маршрутизатор-розетка не работает над проектом Angular CLI?

Question

В первый раз, используя Angular CLI и я новичок в вводе скрипта.

У меня проблема с получением базового CLI, сгенерированного углового проекта.

В основном <router-outlet></router-outlet> незаполнение любым контентом.

Ниже приведен мой код. Если проблема будет найдена и объяснена, она будет оценена ...

+ 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

Используйте этот синтаксис:

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

Answer 2

Вам не хватает здесь имени модуля:

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

Изменить на:

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

Answer 3

Вы должны импортировать HomepageModule в свой AppModule

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

@NgModule({

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