Webpack与Angular-loadChildren找不到模块
[英]Angular with Webpack - loadChildren can't find the module
问题描述
I'm trying load an admin I bought that works with Angular4, however I'm having some trouble configuring the project to run with Webpack: 
我正在尝试加载我购买的与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 {}
when I run the app, I get this message in console: 当我运行该应用程序时，我在控制台中收到以下消息：
NavigationError {id: 1, url: "/", error: Error: Cannot find module './pages/default/index/index.module'.
I know the path to the module is correct, as I can import this module without problem in the same file: 我知道该模块的路径是正确的，因为我可以毫无问题地将该模块导入同一文件中：
import {IndexModule} from './pages/default/index/index.module';
My Webpack config is using this to proccess the typescript: 我的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'
]
}
Is there something wrong I'm doing I didn't notice? 我没有注意到我在做错什么吗？
3 个解决方案
解决方案1
0 2017-10-02 23:35:31
The location of your lazy-loaded modules should start at the app folder. 延迟加载的模块的位置应从app文件夹开始。 Try to add the app keyword to your string like this 尝试像这样将app关键字添加到您的字符串中
loadChildren: 'app/theme/pages/default/index/index.module#IndexModule'},
Also I think you are missing a curly brace here 我也觉得你在这里缺少花括号
{
"path": "",
"component": ThemeComponent,
"canActivate": [AuthGuard],
"children": [
{
"path": "index",
loadChildren: 'app/theme/pages/default/index/index.module#IndexModule'},\
}
]
} <-------- ,
解决方案2
0 已采纳 2018-04-10 13:13:23
Instead of import using module path, I discovered I can import using function. 我发现可以使用函数导入，而不是使用模块路径导入。 This way it worked: 这样工作：
{
"path": "index",
"loadChildren": () => IndexModule
}
解决方案3
-1 2017-10-03 05:21:34
If you're using webpack, you need the angular-router-loader : 如果您使用的是webpack，则需要angular-router-loader ：
loaders: [
{
test: /\.ts$/,
loaders: [
'awesome-typescript-loader',
'angular-router-loader'
]
}
]
Create a module which loads additional routes: 创建一个加载其他路由的模块：
const routeModule:ModuleWithProviders = RouterModule.forChild(routes);
@NgModule({
imports: [ routeModule ],
declarations: [ ... ]
})
export class InboxModule{ }
Create your routes and reference the lazy-loaded module (the path is relative): 创建路由并引用延迟加载的模块（路径是相对的）：
import { Routes } from '@angular/router';
export const routes: Routes = [
{ path: 'index', loadChildren: './theme/pages/default/index/index.module#IndexModule' }
];
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.