Angular 2 feature module lazy loading but not rendering template

Question

I'm probably missing something fairly simple here, but I can't spot it.

From what I can see, my feature module is lazy loading successfully (in dev tools it only pulls in the files when the required link is selected). I've put break points in the code and can see it is hitting the template inside timesheet.component, but it is not rendering it, leaving me with a blank page (aside from the navbar component, which renders).

The files that get 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 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' }
]

App.component is bootstrapped, and calls the following:

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

nav-bar contains a routerLink as follows: <a [routerLink]="['timesheet']">Time Sheet</a>

where is the selector for timesheetComponent

Rahul Singh
– Rahul Singh

2017-05-25 11:17:16 +00:00
Commented May 25, 2017 at 11:17 — Rahul Singh
– Rahul Singh, Commented May 25, 2017 at 11:17
Routed components do not need selectors.

Free2Rhyme2k
– Free2Rhyme2k

2017-05-25 11:23:35 +00:00
Commented May 25, 2017 at 11:23 — Free2Rhyme2k
– Free2Rhyme2k, Commented May 25, 2017 at 11:23

Ankit Saroch · Accepted Answer · 2017-05-25 12:11:34Z

4

In the timesheet.routes.ts you need to specify the route for the empty path.

For the current configuration, the TimesheetComponent is only going to be invoked for timesheet/timesheet route.

As whatever specified in the module specific route is the children of the route specified in the appRoutes of routes.ts

Change it to the below:

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

answered May 25, 2017 at 12:11

Ankit Saroch

6907 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular 2 feature module lazy loading but not rendering template

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related