Using @ngtools/webpack with ContextReplacementPlugin plugin does not create lazy routes chunks

[artaommahe]

OS?

Ubuntu 16.04

Versions.

@ngtools/webpack - 1.2.7

Repro steps.

• create simple webpack config with @ngtools/webpack usage and app with lazy routes (e.g. this example repo https://github.com/daniele-zurico/webpack-aot)
• add to webpack config plugins ContextReplacementPlugin usage like so

plugins: [
  new webpack.ContextReplacementPlugin(
    /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
    __dirname
  ),

• run build npm run build
• no chunks for lazy routes in dist folder
• comment out ContextReplacementPlugin in plugins, build, chunks created

Mention any other details that might be useful.

this check never passes with ContextReplacementPlugin usage

angular-cli/packages/@ngtools/webpack/src/plugin.ts

Line 247 in 29b134d

if (!result.resource.endsWith(path.join('@angular/core/src/linker'))) {

@hansl

[artaommahe]

I checked this in my current project - comment out ContextReplacementPlugin - chunks created successfully, but each chunk includes all imported code despite they are included in non-lazy main bundle.

As i understand it's due to this webpack.optimize.CommonsChunkPlugin usage

        new webpack.optimize.CommonsChunkPlugin({
            name: [ 'main', 'vendor' ]
        }),

For repo above main is ./app/main.aot.ts entry and vendor - added ./app/vendor.ts with contents like this

import 'core-js/es7/reflect';

import '@angular/core';
import '@angular/platform-browser';
import '@angular/router';

With this configuration any shared (between AppModule and FeatureModule) modules will be added both to main and chunk bundles.
If i leave it like so

        new webpack.optimize.CommonsChunkPlugin({
            name: [ 'main' ]
        }),

then SharedModule includes properly, only to main bundle.

I'l add final test repo link today.

[artaommahe]

Added repo where both issues can be reproduced
https://github.com/artaommahe/webpack-aot

App contains 3 modules

• main AppModule that imports SharedModule
• lazy loaded FeatureModule that also imports SharedModule
• SharedModule with commonly used component

For proper work there should be 3 bundles in ./dist folder on npm run build command

• vendor.js with all common libs (angular, corejs)
• main.js with AppModule and SharedModule
• 0.js chunk with only FeatureModule

ContextReplacementPlugin issue

Uncomment this https://github.com/artaommahe/webpack-aot/blob/master/webpack.config.js#L21 and after npm run build there will be no chunks generated in dist folder

CommonsChunkPlugin issue

Run build as it is and see that 0.js chunk also contains SharedModule.
Change plugin options like so

        new webpack.optimize.CommonsChunkPlugin({
            name: [ 'main' ]
        }),

and 0.js chunk propely contains only FeatureModule, but main.js holds all app libs that should be in vendor.js

[nikolasleblanc]

https://github.com/AngularClass/resolve-angular-routes may help. On second look, it seems ancient and unmaintained.

[antonybudianto]

the problem is still present on v1.2.11, but the comment trick still works

[danielRadiceski]

experiencing the same problem. Would be nice if we could have the app and vendor chuncks work together with lazy loading.

[danielRadiceski]

@artaommahe I believe I found something that could help. In v2 of webpack there are other options for the CommonsChunks plugin and splitting the vendor stuff out.

This config seemed to split out the vendor dependencies out and the extra chunck worked properly containing only the lazy modules. Here it is:

new webpack.optimize.CommonsChunkPlugin({
            name: 'vendor',
            minChunks: function (module) {
                // this assumes your vendor imports exist in the node_modules directory
                return module.context && module.context.indexOf('node_modules') !== -1;
            }
        }),

taken from: https://webpack.js.org/guides/code-splitting-libraries/#implicit-common-vendor-chunk

[artaommahe]

// this assumes your vendor imports exist in the node_modules directory

@danielRadiceski it's wrong assumption. In real app my vendor bundle contains common libs from node_modules and some locally saved and patched libs that placed at separate folder ./libs.

[danielRadiceski]

@artaommahe you should be able to tweak the function to your requirements. (i.e to include also any files that are under ./libs)

[kyranjamie]

Perhaps this should be a separate issue, will leave here for now. The plugin ("@ngtools/webpack": "^1.2.11") also silently fails to generate lazyload routes when using the webpack html-loader.
Also facing same issues with ContextReplacement & CommonsChunk plugin.