Angular 2 Routing-Probleme

Question

Ich habe ein Problem mit dem Routing mit einem Angular 2-Projekt. Es ist eine wirklich kleine App, die eine PageNotFoundComponent, eine HomeComponent, für die Indexseite und einen Adminbereich enthält.

Im Admin-Bereich enthält eine Haupt-AdminComponent für die Hauptseite, eine AdminDashboardComponent, für einen Dashboard-Bereich, eine ManageCrisisComponent und ManageHeroComponent.

Dies ist im Grunde die Heroes-Anwendung, die auf Angulars Website auf der Routing-Abschnitt ist.

Die Probleme, die zur Hand ist, ist, dass die Komponenten im Admin-Bereich nicht geladen werden. also versuche ich es einfach zu brechen, um einfach auf die Seiten zu gelangen, ohne dass etwas passiert.

Die Anwendung enthält xxx-routing.module.ts-Datei zum Steuern oder Definieren der Routen und ihre eigene xxx.module.ts-Datei. Also im Grunde, eine app-routing.module.ts Datei und app.module.ts Datei, zusammen mit einer admin-routing.module.ts Datei

Hier ist die Aufschlüsselung des gesamten Codes.

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

Die app.module.ts

Datei ist

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

Hier die app.component.html Datei

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

Hier sind die Admin-Datei

Die a dmin-routing.module.ts Datei

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

Die admin.module.ts Datei

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

Die admin.component.html Datei

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

und nur die Fragen neu zu formulieren, Wenn ich die App starte, werden die Links für die Startseite und die Admin-Seite angezeigt, und sie funktionieren. In der Datei admin.component.html werden die Links zum Dashboard und zum verwalteten Bereich angezeigt, aber wenn ich darauf klicke, erhalte ich die PageNotFound-Komponente html-Datei. Im Grunde ist es nicht die Seite zu finden und zu laden.

Vielen Dank im Voraus.

Answer 1

Es tut mir leid, als ob ich herausgefunden habe, was das Problem war. Ich platziere ein ./ im Pfad und das verursachte das Problem, dass die Seiten nicht richtig geladen wurden.

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

     { path: 'dashboard', component: AdminDashboardComponent }, 
     { path: 'manage-crisis', component: ManageCrisisComponent }, 
     { path: 'manage-heroes', component: ManageHeroComponent } 
    ], 

}, 

];