Angular2找不到嵌套模块

Question

我正在开发一个带有两个顶级模块和每个模块下的几个模块的Web应用程序.例:

• 上市

  • 注册
  • 登录

• 门户

  • 仪表板
  • 结果
  • 约会

每个嵌套模块都有一个或多个潜在的路由,服务和组件.公共和门户模块也有不同的布局要求.

我想要做的是将我的代码分解为上面每个主要部分的模块.但是,当我尝试将模块作为另一个路由的子项加载时,我收到一条错误消息,指出无法找到该模块:

error_handler.js:46
EXCEPTION: Uncaught (in promise): Error: Cannot find module './dashboard/dashboard.module'.

这是我的路由文件:

/app/app.routing.ts

import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

export const appRouting: ModuleWithProviders = RouterModule.forRoot([
  {
    path: 'portal',
    loadChildren: 'portal/portal.module#PortalModule'
  },
  {
    path: '',
    loadChildren: 'public/public.module#PublicModule'
  }
]);


/app/portal/portal.routing.ts

import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { PortalComponent } from './portal.component';

export const portalRouting: ModuleWithProviders = RouterModule.forChild([
  {
    path: '',
    component: PortalComponent,
    children: [
      {
        path: 'dashboard',
        loadChildren: './dashboard/dashboard.module#DashboardModule'
      }
    ]
  }
]);

"仪表板"模块位于:/app/portal/dashboard/dashboard.module.ts,但无论我将模块路径设置为什么loadChildren,它似乎都找不到它.

我究竟做错了什么？我使用的是WebPack而不是SystemJS.

Answer 1

到目前为止，使用 es6-promise 加载器似乎对我有用。这是我到目前为止的路由器......

app/app.routing.ts
import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

export const appRouting: ModuleWithProviders = RouterModule.forRoot([
  {
    path: 'portal',
    loadChildren: () => require('es6-promise!./portal/portal.module')('PortalModule')
  },
  {
    path: '',
    loadChildren: () => require('es6-promise!./public/public.module')('PublicModule')
  }
]);

app/portal/portal.routing.ts
import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { PortalComponent } from './portal.component';

export const portalRouting: ModuleWithProviders = RouterModule.forChild([
  {
    path: 'portal',
    component: PortalComponent,
    children: [
      {
        path: 'dashboard',
        loadChildren: () => require('es6-promise!./dashboard/dashboard.module')('DashboardModule')
      },
      {
        path: 'results',
        loadChildren: () => require('es6-promise!./results/results.module')('ResultsModule')
      }
    ]
  }
]);

app/portal/dashboard/dashboard.routing.ts
import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { DashboardComponent } from './dashboard.component';

export const dashboardRouting: ModuleWithProviders = RouterModule.forChild([
  {
    path: '',
    component: DashboardComponent
  }
]);

我看到<router-outlet>标签的正确输出。