RC.5 抛出"找不到'default'当延迟加载模块与路由

Question

尝试延迟加载angular2 rc中的模块。这个模块本身包含routes。应用试图在点击它注册的路由时延迟加载模块，但立即抛出

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

应用中的路由定义如下:

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

TestModule包含以下路由:

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

我删除了redirectTo，并把默认路由指向了一个真正的组件。我也试过用像

这样的子元素定义路由

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

得到相同的结果。

有什么提示吗?加载模块按预期工作。

对

Answer 1

您必须将导出的模块类名添加到loadChildren字符串中，如

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

改为

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

如官方文档中所述https://angular.io/docs/ts/latest/guide/router.html

如果我们仔细观察loadChildren字符串，我们可以看到它是映射的直接到我们的危机中心。模块文件我们的危机中心功能区。在我们使用的文件的路径之后#表示文件路径的结束位置，并告诉路由器文件名我们的CrisisCenter模块。如果我们查看crisis-center模块我们可以看到，它与导出的NgModule类名匹配。

这部分在一些博客文章中没有，例如

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

Answer 2

将模块文件./app/test/test.module.修改为

export default class TestModule{}

你一定是跳过了"default"关键字

Answer 3

或者，

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