RC.5 throws "Cannot find 'default' when lazy loading module with routes

Question

tried to lazy load a module in an angular2 rc. app. This module contains routes itself. The app is trying to lazy load the module on clicking the route it is registered on but immediately throws

Error: Uncaught (in promise): Error: Cannot find 'default' in './app/test/test.module'

Routes in app are defined like:

export const routes: Routes = [
  { path: '', component: StartComponent },
  { path: 'route1', component: Route1Component },
  { path: 'test', loadChildren: './app/test/test.module'},
  { path: '**', component: StartComponent } //page not found
];

The TestModule contains following routes:

export const TestRoutes: Routes = [
      { path: '', redirectTo: 'overview' },
      { path: 'overview', component: TestOverviewComponent },
      { path: 'moredata', component: MoreDataComponent }
];

I removed redirectTo and pointed the default route to a real component without luck. Also tried defining routes with children like

export const AdminRoutes: Routes = [
  {
    path: 'test', component: TestComponent,
    children: [
          { path: '', redirectTo: 'overview' },
          { path: 'overview', component: TestOverviewComponent },
          { path: 'moredata', component: MoreDataComponent }
    ]
  }
];

with same result.

Any hints what might be wrong? Loading the module eagerly works as intended.

Regards

Answer 1

You have to add the exported class name of your module to the loadChildren string, like

{ path: 'test', loadChildren: './app/test/test.module'},

change to

{ path: 'test', loadChildren: './app/test/test.module#TestModule'},

as stated in official documentation https://angular.io/docs/ts/latest/guide/router.html

If we look closer at the loadChildren string, we can see that it maps directly to our crisis-center.module file where we previously built out our Crisis Center feature area. After the path to the file we use a # to denote where our file path ends and to tell the Router the name of our CrisisCenter NgModule. If we look in our crisis-center.module file, we can see it matches name of our exported NgModule class.

this part is missing in some blog posts, e.g.

https://angularjs.blogspot.de/2016/08/angular-2-rc5-ngmodules-lazy-loading.html

Answer 2

Modidfy your module file ./app/test/test.module. as

export default class TestModule{}

You must have skipped the "default" keyword.

Answer 3

OR what else you can do is,

export const AdminRoutes: Routes = [

  { path: '', redirectTo: 'test', pathMatch: 'full'},  //<----added this


  {
    path: 'test', component: TestComponent,
    children: [
          { path: '', redirectTo: 'overview' },
          { path: 'overview', component: TestOverviewComponent },
          { path: 'moredata', component: MoreDataComponent }
    ]
  }
];