Angular 2功能模塊延遲加載但不呈現模板

Question

我可能在這裏錯過了一些相當簡單的事情，但我無法發現它。

從我所看到的，我的功能模塊成功延遲加載（在開發工具中，只有在選擇了所需的鏈接時纔會拉入文件）。我在代碼中添加了斷點，並且可以看到它正在碰到timesheet.component中的模板，但它沒有渲染它，留下一個空白頁（除了呈現的導航欄組件外）。

是獲得加載的文件是

1：

// timesheet.module.ts 
import { NgModule } from '@angular/core'; 
import { CommonModule } from '@angular/common'; 
import { RouterModule } from '@angular/router'; 
import { timesheetRoutes } from './timesheet.routes' 
import { TimesheetComponent } from './timesheet.component' 

@NgModule({ 
imports: [ CommonModule, RouterModule.forChild(timesheetRoutes) ], 
declarations: [ TimesheetComponent ], 
providers: [ ] 
}) 
export class TimesheetModule 

2：

// timesheet.routes.ts 
import { Routes, RouterModule } from '@angular/router' 
import { TimesheetComponent } from './timesheet.component' 

export const timesheetRoutes: Routes = [ 
{ path: 'timesheet', component: TimesheetComponent } 
] 

3：

import { Component } from '@angular/core'; 

@Component({ 
template: `<h1>Mobile Timesheet</h1>` 
}) 

export class TimesheetComponent { 
} 

我的路線如下：

// routes.ts 

import { CaseListComponent } from './cases/case-list.component'; 
import { CaseDetailComponent } from './cases/case-details/case-details.component'; 

import { Routes } from '@angular/router' 

import { CaseListResolverService } from './cases/case-list-resolver.service'; 

export const appRoutes:Routes = 
[ 
{ path: 'cases', component: CaseListComponent, resolve: 
{cases:CaseListResolverService} }, 
{ path: 'cases/:irn', component: CaseDetailComponent }, 
{ path: '', redirectTo: '/cases', pathMatch: 'full' }, 
{ path: 'timesheet', loadChildren: 
'app/timesheet/timesheet.module#TimesheetModule' } 
] 

App.component自舉，並調用以下：

<nav-bar></nav-bar> 
<router-outlet></router-outlet> 

導航欄包含routerLink如下： <a [routerLink]="['timesheet']">Time Sheet</a>

Answer 1

在timesheet.routes.ts你需要指定路線空路徑。

對於當前的配置，TimesheetComponent只會調用timesheet/timesheet路由。

正如模塊具體路線任何規定是appRoutesroutes.ts的

將其更改爲以下指定的路線的孩子：

export const timesheetRoutes: Routes = [ 
    { path: '', component: TimesheetComponent } 
]