为什么我的路由器插座不能用于 Angular CLI 项目？

Question

第一次使用 Angular CLI，我是新手。

我在使用生成 Angular 项目的基本 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() {
  }

}

主页路由.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'}

改为：

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

Answer 2

使用这个语法：

{
    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 { }