[英]Angular2 cannot find a nested module
I'm working on a web app with two top level modules and several modules under each. 我正在开发一个Web应用程序,其中包含两个顶级模块,每个模块下面都有几个模块。 Example:
例:
public 上市
portal 门户网站
Each of the nested modules has one or more potential routes, services and components. 每个嵌套模块都有一个或多个潜在的路由,服务和组件。 The public and portal modules also have different layout requirements.
公共和门户模块也有不同的布局要求。
What I would like to do is break my code up into modules for each main section above. 我想做的是将我的代码分解为上述每个主要部分的模块。 However, when I attempt to load a module as a child of another route, I get an error stating the module can't be found:
但是,当我尝试将模块作为另一条路由的子级加载时,出现错误,指出找不到该模块:
error_handler.js:46
EXCEPTION: Uncaught (in promise): Error: Cannot find module './dashboard/dashboard.module'.
Here are my routing files: 这是我的路由文件:
/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'
}
]
}
]);
The "dashboard" module lives at: /app/portal/dashboard/dashboard.module.ts, but no matter what I set the module path to in loadChildren
, it can't seem to find it. “仪表板”模块位于/app/portal/dashboard/dashboard.module.ts,但是无论我在
loadChildren
模块路径设置loadChildren
,它似乎都找不到。
What am I doing wrong? 我究竟做错了什么? I am using WebPack instead of SystemJS.
我正在使用WebPack而不是SystemJS。
The correct path for the dashboard module will be app/portal/dashboard/dashboard.module
. 仪表板模块的正确路径是
app/portal/dashboard/dashboard.module
。
For some reason webpack needs the absolute path in this case. 由于某种原因,在这种情况下,webpack需要绝对路径。 Don't forget to restart the server after changing the path.
不要忘记更改路径后重新启动服务器。
Using the es6-promise loader seems to be working for me so far. 到目前为止,使用es6-promise加载程序似乎对我来说仍然有效。 Here's my routers to this point...
至此,这是我的路由器...
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
}
]);
and I'm seeing the correct output of my <router-outlet>
tags. 并且我看到了
<router-outlet>
标签的正确输出。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.