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