在Webpack生产模式下,Angular的懒加载可能不起作用的原因可能是由于Webpack配置的问题。下面是一个可能的解决方法,包含了代码示例:
const { AngularCompilerPlugin } = require('@ngtools/webpack');
module.exports = {
// ...
plugins: [
new AngularCompilerPlugin({
tsConfigPath: 'path/to/tsconfig.json',
entryModule: 'path/to/app.module#AppModule',
sourceMap: false, // 设置为false以减小打包体积
skipCodeGeneration: true // 禁用代码生成
})
],
output: {
// ...
chunkFilename: '[name].[chunkhash].js' // 为异步加载的模块生成唯一的文件名
},
// ...
};
loadChildren
属性来进行懒加载。例如:const routes: Routes = [
{
path: 'lazy',
loadChildren: () => import('./lazy/lazy.module').then(m => m.LazyModule)
}
];
ng build --configuration=production
这样做应该能够在Webpack生产模式下使Angular的懒加载正常工作。
下一篇:Angular懒加载子模块