I tried to use AOT compilation in my project, I have 7 modules that are lazy loaded. AOT compilation seems to work (my app is faster), but the size of my app is 1 Mo bigger than without AOT compilation. When I use bundle analyzer plugin to see what is going on, it seems that everywhere my Shared Module is imported (that is to say, almost in all my lazy loaded modules) it is re-imported so there is a copy of Shared Module in each of my chunk !
Is someone has any solution for that ?
I do not have any providers in my shared module. To make AOT works with lazy loading, I had to use this configuration for webpack :
module.exports = function(env) {
return webpackMerge({
plugins: [
new AotPlugin({
tsConfigPath: 'tsconfig-aot.json',
entryModule: helpers.root('src/app/app.module#AppModule')
}),
]
}, commonConfig, {
devtool: 'source-map',
output: {
path: helpers.root('export/dist'),
publicPath: '/',
filename: '[name].[hash].js',
chunkFilename: '[id].[hash].chunk.js'
},
module: {
rules: [
{
test: /\.ts$/,
use: ['@ngtools/webpack']
}
]
},
plugins: [
new webpack.NoEmitOnErrorsPlugin(),
new webpack.optimize.UglifyJsPlugin({ // https://github.com/angular/angular/issues/10618
compress: { warnings: false },
mangle: {
keep_fnames: true
}
}),
new webpack.LoaderOptionsPlugin({
htmlLoader: {
minimize: false // workaround for ng2
}
}),
new ExtractTextPlugin('[name].[hash].css'),
new BundleAnalyzerPlugin()
]
});
};
and common config :
module.exports = {
entry: {
'polyfills': './src/polyfills.ts',
'vendor': './src/vendor.ts',
'app': './src/main.ts',
},
resolve: {
extensions: ['.js', '.ts', '.scss']
},
module: {
rules: [
{
test: /\.html$/,
use: 'html-loader?attrs=img:src div:inlineSVG'
},
{
test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico|otf)$/,
use: 'file-loader?name=assets/[name].[hash].[ext]'
},
{
test: /\.scss$/,
exclude: [helpers.root('src', 'app')],
use: ExtractTextPlugin
.extract({
fallback: 'style-loader',
use: [
{ loader: 'css-loader', query: { sourceMaps: true } },
{ loader: 'resolve-url-loader'},
{ loader: 'sass-loader'}
]
})
},
{
test: /\.scss$/,
include: [helpers.root('src', 'app')],
use: [
{ loader: 'raw-loader'},
{ loader: 'resolve-url-loader'},
{ loader: 'sass-loader'}
]
}
]
},
plugins: [
// Workaround for angular/angular#11580
new webpack.ContextReplacementPlugin(
/angular(\\|\/)core(\\|\/)@angular/,
helpers.root('src'), // location of your src
{
// your Angular Async Route paths relative to this root directory
}
),
new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /en|fr/),
new webpack.DefinePlugin({
'CONFIG_STORAGE_NAME' : JSON.stringify(CONFIG_STORAGE_NAME),
'process.env': {
'CONFIG_STORAGE_NAME' : JSON.stringify(CONFIG_STORAGE_NAME)
}
}),
new webpack.optimize.CommonsChunkPlugin({
names: ['app', 'vendor', 'polyfills']
}),
new HtmlWebpackPlugin({
template: helpers.root('src', 'index.html')
})
]
};