angular-cli: Using @ngtools/webpack with ContextReplacementPlugin plugin does not create lazy routes chunks

OS?

Ubuntu 16.04

Versions.

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

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 10
Comments: 21 (2 by maintainers)

Links to this issue

angular2 aot - AOT: ngtools/webpack + lazy loading does not work. Using: Angular 4, webpack 3 - Stack Overflow

Commits related to this issue

fix(tools): add workaround to error Cannot find module.ngfactory See: * https://github.com/angular/angular-cli/issues/6518 * https://github.com/angular/angular-cli/issues/4431 — committed to BrainCrumbz/ngtools-webpack-demo by GiuseppePiscopo 7 years ago

Most upvoted comments

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

brunopalaoro on Apr 26, 2017

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.

kyranjamie on Feb 27, 2017

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

artaommahe on Feb 4, 2017

@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 on May 31, 2017

watching…

photostu on Mar 21, 2017