angular2嵌套路由不工作,没有错误报告,但空白页

请帮我检查一下代码…没有编译错误,否则在npm start后cli输出,但浏览器看起来是一个空白页面。 我一遍又一遍地检查,但仍然找不到有什么问题。

PS:我是一个新生在angular2 …

app.module

 @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, AdminModule, WaiterModule, CookModule, AppRoutingModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } 

APP-routing.module

 const appRoutes: Routes = [ { path: "", redirectTo: "/admin", pathMatch:"full" } ]; @NgModule({ imports: [ RouterModule.forRoot(appRoutes, { enableTracing: true }) ], exports: [RouterModule] }) export class AppRoutingModule { } 

app.component.html

 <div style="text-align:center"> <h1> Welcome to Angular2 </h1> </div> <router-outlet></router-outlet> 

admin.module

 @NgModule({ declarations: [ AdminComponent, DishBoardComponent, UserBoardComponent, StatisticsBoardComponent, AdminSiderBarComponent ], imports: [ CommonModule, AdminRoutingModule ] }) export class AdminModule { } 

pipe理员-routing.module

 const adminRoutes: Routes = [ { path: "admin", component: AdminComponent, children: [ { path: "", redirectTo: "/checkout",pathMatch:"full" }, { path: "checkout", component: CheckoutBoardComponent }, { path: "dish", component: DishBoardComponent }, { path: "user", component: UserBoardComponent }, { path: "statistics", component: StatisticsBoardComponent } ] } ]; @NgModule({ imports: [ RouterModule.forChild(adminRoutes) ], exports: [RouterModule] }) export class AdminRoutingModule { } 

admin.component.html

 <p> admin works! </p> <a routerLink="/checkout">Checkout</a> <a routerLink="/user">User</a> <a routerLink="/dish">Dish</a> <a routerLink="/statistics">Statistics</a> <router-outlet></router-outlet> <br> footer 

看起来你没有在你的app.routing.module中定义admin路线及其子

你应该得到它的工作

app.module.ts

无需在这里导入其他模块。 只需导入AppRoutingModule

 import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; /** App Modules **/ import { AppRoutingModule } from './app.routing.module'; /** App Components**/ import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, AppRoutingModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } 

app.routing.module.ts

加载admin.module路由并将它们传递给admin路由。

 import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; /** App Modules**/ import { AdminModule} from './admin/admin.module'; export function exportAdminModule() { return AdminModule; } const appRoutes: Routes = [ { path: 'admin', loadChildren: exportAdminModule }, { path: '', redirectTo: '/admin', pathMatch: 'full' }, { path: '**', redirectTo: '/admin' } ]; @NgModule({ imports: [ RouterModule.forRoot(appRoutes, { enableTracing: true }) ], exports: [RouterModule] }) export class AppRoutingModule { } 

admin.module.ts

 import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; // Import your components /** App Routing **/ import { AdminRoutingModule} from './admin.routing.module'; @NgModule({ declarations: [ // your components // your admin.component ], imports: [ CommonModule, AdminRoutingModule ] }) export class AdminModule { } 

admin.routing.module.ts

设置一个空path作为基础路线''

 import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; // Import your components @NgModule({ imports: [ RouterModule.forChild([ { path: '', component: AdminComponent, children: [ { path: '', redirectTo: '/checkout', pathMatch: 'full' }, { path: 'checkout', component: CheckoutBoardComponent }, . . . ] } ]) ], exports: [RouterModule] }) export class AdminRoutingModule{ } 

如果你想有更多的子路线,例如,嵌套的router-outlet只是复制我所显示的app.module.routing与出口和loadchildren

我不太确定你想要实现你在app.routing.module上显示的app.routing.module 。 您确定要将所有内容redirect到pipe理员吗?

就像是:

 @NgModule({ imports: [ RouterModule.forRoot([ { path: 'login', component: LoginPageComponent, canActivate: [PreventLoggedInAccess] }, { path: 'admin', loadChildren: exportAdminModule }, { path: '', redirectTo: '/login', pathMatch: 'full' }, { path: '**', redirectTo: '/login' } ], { useHash : true }) ], exports: [RouterModule] }) 

如果您已经login,则PreventLoggedInAccess authguard会阻止您login

 @NgModule({ imports: [ RouterModule.forChild([ { path: '', component: AdminComponent, canActivateChild: [AuthGuardService], children: [ . . . ] } ]) ], exports: [RouterModule] }) 

AuthGuardService允许访问子路由只有当你login会更有意义,在我看来。

在这里你可以阅读更多关于身份validation。