我正在尝试加载我购买的与 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 {}
当我运行该应用程序时,我在控制台中收到此消息:
NavigationError {id: 1, url: "/", error: Error: Cannot find module './pages/default/index/index.module'. at eval (eval at ./src/main/weba…} error : Error: Cannot find module './pages/default/index/index.module'. at eval (eval at ./src/main/webapp/admin/app lazy recursive (http://localhost:8080/admin/app/main.bundle.js:6:1), :5:9) at ZoneDelegate.invoke (webpack-internal:///./node_modules/zone.js/dist/zone.js:391:26) at Object.onInvoke (webpack-internal:///./node_modules/@angular/core/@angular/core.es5.js:4094:33) at ZoneDelegate.invoke (webpack-internal:///./node_modules/zone.js/dist/zone.js:390:32) at Zone.run (webpack-internal:///./node_modules/zone.js/dist/zone.js:141:43) at eval (webpack-internal:///./node_modules/zone.js/dist/zone.js:831:57) at ZoneDelegate.invokeTask (webpack-internal:///./node_modules/zone.js/dist/zone.js:424:31) at Object.onInvokeTask (webpack-internal:///./node_modules/@angular/core/@angular/core.es5.js:4085:33) at ZoneDelegate.invokeTask (webpack-internal:///./node_modules/zone.js/dist/zone.js:423:36) at Zone.runTask (webpack-internal:///./node_modules/zone.js/dist/zone.js:191:47) id : 1 url : "/"
我知道模块的路径是正确的,因为我可以在同一个文件中毫无问题地导入这个模块:
import {IndexModule} from './pages/default/index/index.module';
我的 Webpack 配置使用它来处理 typescript :
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'},\
}
]
} <-------- ,
关于带有 Webpack 的 Angular - loadChildren 找不到模块,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46534903/