Angular 2路由问题

我在使用Angular 2项目进行路由时遇到了问题 . 它现在是一个非常小的应用程序，它包含一个PageNotFoundComponent，一个HomeComponent，用于索引页面和一个admin部分 .

在admin部分中包含主页面的主AdminComponent，AdminDashboardComponent，用于仪表板部分，ManageCrisisComponent和ManageHeroComponent .

这基本上是在路线部分的Angulars网站上的英雄应用程序 .

手头的问题是管理部分中的组件无法加载 . 所以我只是试图将其分解为能够在没有任何进展的情况下路由到页面 .

该应用程序包含xxx-routing.module.ts文件来控制或定义路由，以及它们自己的xxx.module.ts文件 . 基本上，app-routing.module.ts文件和app.module.ts文件以及admin-routing.module.ts文件

这是所有代码的细分 .

app-routing.module.ts

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

import { HomeComponent } from './home/home.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';

const APP_ROUTES: Routes = [
{ path: 'admin', loadChildren: 'app/admin/admin.module#AdminModule', data: { preload: true }},
{ path: '', component: HomeComponent },
{ path: '**', component: PageNotFoundComponent }
];

@NgModule({
imports: [
    RouterModule.forRoot(APP_ROUTES)
],
exports: [
    RouterModule
]
})

export class AppRoutingModule {}

app.module.ts文件

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
import { HomeComponent } from './home/home.component';



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

这是app.component.html文件

<h2>App component</h2>
<hr>
<nav>
    <a routerLink="/" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">Home</a>
    <a routerLink="admin" routerLinkActive="active">Admin</a>
</nav>
<router-outlet></router-outlet>

这是管理员文件

admin-routing.module.ts文件

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

import { AdminComponent } from './admin.component';
import { AdminDashboardComponent } from './admin-dashboard.component';
 import { ManageCrisisComponent } from './manage-crisis.component';
import { ManageHeroComponent } from './manage-hero.component';

const ADMIN_ROUTES: Routes = [
{ path: '', component: AdminComponent,
  children: [

      { path: './dashboard', component: AdminDashboardComponent },
      { path: './manage-crisis', component: ManageCrisisComponent },
      { path: './manage-heroes', component: ManageHeroComponent }
  ],
  data: { preload: true}
 },

];

@NgModule({
imports: [
    RouterModule.forChild(ADMIN_ROUTES)
],

exports: [ RouterModule ]
})

export class AdminRoutingModule {}

admin.module.ts文件

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

import { AdminRoutingModule } from './admin-routing.module';

import { AdminComponent } from './admin.component';
import { AdminDashboardComponent } from './admin-dashboard.component';
import { ManageCrisisComponent } from './manage-crisis.component';
import { ManageHeroComponent } from './manage-hero.component';



@NgModule({
imports: [
    CommonModule,
    FormsModule,
    AdminRoutingModule
],
declarations: [
    AdminComponent,
    AdminDashboardComponent,
    ManageCrisisComponent,
    ManageHeroComponent
],
})

export class AdminModule {}

admin.component.html文件

<h2>Admin Home</h2>
<nav>
<a routerLink="./dashboard" routerLinkActive="active">Dashboard</a>
<a routerLink="./manage-crisis" routerLinkActive="active">Manage Crisis</a>
<a routerLink="./manage-heroes" routerLinkActive="active">Manage Heroes</a>
 </nav>

<router-outlet></router-outlet>

而且只是重述问题，就是当我启动应用程序时，主页和管理页面的链接显示，并且它们正常工作 . 在admin.component.html文件中显示指向仪表板和托管区域的链接，它们会显示，但是当我单击它们时，我会获得PageNotFound组件的html文件 . 所以基本上它没有找到页面并加载它 .

提前致谢 .