It seems like I might be overlooking something simple here, but I just can't seem to find it.
Based on my observations, my feature module is lazy loading successfully (as seen in dev tools where files are only loaded when the required link is selected). I have added breakpoints in the code and confirmed that it is reaching the template inside timesheet.component. However, the template is not rendering, resulting in a blank page (except for the navbar component that does render).
The relevant files being loaded are:
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 {
}
My routes are defined as follows:
// 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' }
]
The App component is bootstrapped and makes the following call:
<nav-bar></nav-bar>
<router-outlet></router-outlet>
navbar contains a routerLink as follows:
<a [routerLink]="['timesheet']">Time Sheet</a>