I tried to use AOT compilation in my project, I have 7 modules that are lazy loaded. AOT compilation seems to work (my application is faster), but my application is 1 Mo larger than without AOT compilation. When I use the package analyzer plugin to see what happens, it seems that wherever my general module is imported (that is, in almost all of my lazy loaded modules), it is re-imported, so there is a copy of the general module in every piece of mine!
Does anyone have a solution for this?
I do not have my providers in my general module. For AOT to work 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 general configuration:
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') }) ] };