Angular2找不到嵌套模块

布兰登

我正在开发一个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，但是无论我将模块路径设置为in loadChildren，似乎都找不到它。

我究竟做错了什么？我正在使用WebPack而不是SystemJS。

布兰登

到目前为止，使用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>代码的正确输出。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。