我正在尝试加载我购买的与Angular4一起使用的管理员，但是我在配置项目以使用Webpack运行时遇到了一些问题：
const routes: Routes = [
{
"path": "",
"component": ThemeComponent,
"canActivate": [AuthGuard],
"children": [
{
"path": "index",
"loadChildren": './pages/default/index/index.module#IndexModule'
}
],
{
"path": "**",
"redirectTo": "404",
"pathMatch": "full"
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class ThemeRoutingModule {}
当我运行应用程序时，我在控制台中收到此消息：
我知道模块的路径是正确的，因为我可以在同一个文件中毫无问题地导入这个模块：
import {IndexModule} from './pages/default/index/index.module';
我的Webpack配置正在使用它来处理打字稿：
module: {
rules: [{
test: /\.ts$/,
enforce: 'pre',
loaders: 'tslint-loader',
exclude: ['node_modules', new RegExp('reflect-metadata\\' + path.sep + 'Reflect\\.ts')]
},
{
test: /\.ts$/,
loaders: [
'awesome-typescript-loader',
'angular-router-loader?debug=true',
'angular2-template-loader'
]
}
是不是有什么我没注意到的错误？
延迟加载模块的位置应该从app文件夹开始。尝试将app关键字添加到您的字符串中，如下所示
loadChildren: 'app/theme/pages/default/index/index.module#IndexModule'},
还有我觉得你这里少了个花括号
{
"path": "",
"component": ThemeComponent,
"canActivate": [AuthGuard],
"children": [
{
"path": "index",
loadChildren: 'app/theme/pages/default/index/index.module#IndexModule'},\
}
]
} <-------- ,
我发现我可以使用函数导入，而不是使用模块路径导入。这样工作：
{
"path": "index",
"loadChildren": () => IndexModule
}
如果您使用的是webpack，则需要angel-router-loader：
loaders: [
{
test: /\.ts$/,
loaders: [
'awesome-typescript-loader',
'angular-router-loader'
]
}
]
创建一个加载其他路由的模块：
const routeModule:ModuleWithProviders = RouterModule.forChild(routes);
@NgModule({
imports: [ routeModule ],
declarations: [ ... ]
})
export class InboxModule{ }
创建您的路由并引用延迟加载的模块（路径是相对的）：
import { Routes } from '@angular/router';
export const routes: Routes = [
{ path: 'index', loadChildren: './theme/pages/default/index/index.module#IndexModule' }
];
