为什么我的路由器插座不能在 Angular CLI 项目上工作？

Question

第一次使用 Angular CLI 并且我是键入脚本的新手。

我在使用基本 CLI 生成 angular 项目时遇到问题。

基本上<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() {
  }

}

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

应用-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

您应该将 HomepageModule 导入您的 AppModule

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

@NgModule({

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

Answer 2

使用这个语法：

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

Answer 3

您在这里缺少模块名称：

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

更改为：

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

为什么我的路由器插座不能在 Angular CLI 项目上工作？

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

typescript

angular2-routing

angular-cli

angular