Question

我可能在这里遗漏了一些相当简单的东西，但我无法发现它。

从我所看到的，我的功能模块是成功延迟加载（在开发工具中，它只在选择所需链接时拉入文件）。我在代码中放置了断点，可以看到它在timeheet.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>

nav-bar包含routerLink，如下所示： <a [routerLink]="['timesheet']">Time Sheet</a>

Answer 1

在timesheet.routes.ts中，您需要指定空路径的路线。

对于当前配置，仅对timesheet/timesheet路由调用TimesheetComponent。

在模块特定路线中指定的是appRoutes routes.ts中指定的路线的子路径

将其更改为以下内容：

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

Angular 2特征模块延迟加载但不渲染模板

1 个答案: