首页 文章

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

提问于
浏览 次
9

试图在angular2 rc中延迟加载模块 . 应用程序 . 该模块本身包含路由 . 该应用程序试图懒惰加载模块点击它注册的路线，但立即抛出

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

结果相同 .

什么提示可能有什么问题？加载模块急切地按预期工作 .

问候

angular angular2-routing

3 回答

  • 27

    您必须将模块的导出类名添加到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字符串，我们可以看到它直接映射到我们之前构建危机中心功能区的crisis-center.module文件 . 在文件路径之后，我们使用＃来表示文件路径的结束位置，并告诉路由器CrisisCenter NgModule的名称 . 如果我们查看我们的crisis-center.module文件，我们可以看到它与我们导出的NgModule类的名称相匹配 .

    某些博文中缺少此部分，例如

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

    回复于
  • 1

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

    export default class TestModule{}

    您必须跳过“default”关键字 .

    回复于
  • 5

    或者你还能做什么，

    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 }
    ]
  }
];
    回复于

相关问题