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

仪表板模块的正确路径为app/portal/dashboard/dashboard.module。

由于某些原因，webpack在这种情况下需要绝对路径。更改路径后，请不要忘记重新启动服务器。

Answer 2

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

Angular2找不到嵌套模块

2 个答案: