我在Angular 2(版本5.1.3)项目中进行延迟加载时遇到问题。
我正在关注Todd Motto关于此Lazy Loading Code Splitting的文章,并且无法完成最后一英里的工作。
我有一个包含多个模块的应用程序,其中一些我想延迟加载(大多数用户不使用该功能,并且应用程序本身很大,捆绑了所有内容)。
app.module route config如下所示:
export const routes: Routes = [
{ path: '',
redirectTo: 'login',
pathMatch: 'full'
},
{ path: 'login',
component: LoginComponent
},
{ path: 'home',
component: HomeComponent
},
{ path: 'reports-engine',
loadChildren: './reportsengine/reportsengine.module#ReportsEngineModule'
},
{ path: '**',
component: NotFoundComponent
}
];
ReportsEngine模块:
export const routes: Routes = [
{
path: '',
component: ReportsComponent,
children: [{
path: '',
redirectTo: 'reports-engine',
pathMatch: 'full'
},
{
path: 'account',
component: Account
},
{
path: 'accounts-manage',
component: AccountsManage
},
{
path: '**',
component: NotFoundComponent
}]
}
];
我的webpack.config(相关部分)在这里:
output: {
filename: '[name].js',
chunkFilename: '[name].chunk.js',
path: path.resolve(cwd, 'build'),
publicPath: './build/',
sourceMapFilename: '[name].map'
},
rules.push({
test: /\.ts$/,
loaders: [
'awesome-typescript-loader',
'angular2-template-loader'
] ,
test: /\.(ts|js)$/,
loaders: [
'angular-router-loader'
] ,
include: [
path.resolve(cwd, 'app')
]
});
目前它只构建主要的app.js和vendor.js文件(和.map文件),而不是0.chunk.js等文件。
当我导航到/ reports-engine网址时,我找不到'页面,我期待ReportsComponent。
我不确定我错过了什么。
答案 0 :(得分:0)
ReportEngine模块。
export const routes: Routes = [
{
path: '',
component: ReportsComponent,
children: [
{
path: 'account',
component: Account
},
{
path: 'accounts-manage',
component: AccountsManage
},
{
path: '**',
component: NotFoundComponent
}
]
}
];
改变就像这样,它会起作用。
如果你想要孩子的道路:'' - >像这样检查
children: [
{
path: '',
component: AboutComponent
}
]
如果您有任何疑问,请访问此链接,只是进行延迟加载
https://scotch.io/courses/routing-angular-2-applications/lazy-loading
我希望它会有所帮助。