Angular-cli: 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
https://github.com/angular/angular-cli/blob/29b134d7018c7d4e2eed74715b30b28e56fdcd49/packages/%40ngtools/webpack/src/plugin.ts#L247

@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.

[photostu]

watching...

[brunopalaoro]

I have the same problem with version 1.3.1. Any news on this?

[GeorgeKnap]

Having the same issue with version 1.3.1
DEV build uses [ 'ts-loader', 'angular2-template-loader', 'angular2-router-loader' ]
PROD build uses @ngtools/webpack

now, during dev builds I have to use this plugin, otherwise getting Critical dependency: the request of a dependency is an expression warnings:

        new webpack.ContextReplacementPlugin(
            /angular(\\|\/)core(\\|\/)@angular/,
            helpers.root('app')
        )

If I use this plugin also for PROD build, the @ngtools/webpack does not generate lazy loaded chunks. If the ContextReplacementPlugin is commented out, the @ngtools/webpack generates chunks normally.

So far I do not include ContextReplacementPlugin into my PROD build and it seems to _work_.

[GiuseppePiscopo]

Importing from now-closed duplicate #6518, please consider it happens also with these specs:

• Output from: ng --version. ng is not installed in this project. @ngtools/webpack is.
• output from: node --version: v6.2.2
• npm --version: 3.9.5
• OS: Windows 10 version 1703, as well as Mac OS Sierra
• angular 4.1.3,
• @ngtools/webpack 1.3.3,
• webpack 2.5.1,
• typescript 2.3.2,
• tslib 1.7.1

on this demo project

[hheexx]

@GeorgeKnap Thanks for workaround but if I remove ContextReplacementPlugin I receive this error:

ERROR in ./ClientApp/aot lazy
Module not found: Error: Can't resolve 'C:UsersBorisDocumentsVisual Studio 2015Projectscx_publicClientAppaotappmoduleslazy.module.ngfactory.ts' in 'C:UsersBorisDocumentsVisual Studio 2015Projectscx_publicClientAppaot'
@ ./ClientApp/aot lazy
@ ./~/@angular/core/@angular/core.es5.js
@ ./ClientApp/boot-client.ts

It does not output chunks.

Exact ContextReplacementPlugin line is:
new webpack.ContextReplacementPlugin(/angular(\\|\/)core(\\|\/)@angular/, path.resolve(__dirname, 'notexist/'))

ngtools 1.4.0-rc.2 (tried also with 131 and 133)

[GiuseppePiscopo]

For completeness, here are current ContextReplacementPlugin config:

    new webpack.ContextReplacementPlugin(
      /angular(\\|\/)core(\\|\/)@angular/,,
      'D:\path\to\my\source\root',
      {}
    ),

and CommonsChunkPlugin config:

    new webpack.optimize.CommonsChunkPlugin({
      name: ['main', 'vendor'],
      'js/[name]-bundle.js',
      minChunks: mod => /node_modules/.test(mod.resource),
    }),

[GiuseppePiscopo]

@sumitarora all in all, I must say I'm not sure the two issues are really duplicate. Others here are reporting that they cannot build when commenting out that replacement plugin, while I can. Also, we don't even know if they share the same steps (e.g. does build fail? Does opening page fail? Does browsing to lazy module fail?) and the same stacktrace.

Just my 2c

[GiuseppePiscopo]

@artaommahe maybe I missed that in the thread, could you please state whether the error shows up at compile time, or runtime and doing what? Also, could you please show the error or stacktrace you see? This is to better understand if present issue and #6518 are really duplicate or not. Tnx

[artaommahe]

@GiuseppePiscopo what error? my issues https://github.com/angular/angular-cli/issues/4431#issuecomment-277454645 about completely missed lazy loaded chunks on build and duplicated shared modules in different chunks. It's about build time, not runtime.

[GiuseppePiscopo]

I see. So I guess you can browse to the app at runtime, then there should be some error in developer console when you try to access a lazy module URL, or maybe right away when app shows up, don't know. Could you please post the stacktrace in that case? Just to compare to what happens in #6518 . Thank you

[clydin]

Closing as the provided configuration code show below is both unnecessary when used with the ngtools plugin and directly interferes with its functionality; and therefore should not be used with the plugin.

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

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}