Angular Lazy loaded modules not working

[GenZodd]

trafficstars

I have converted my angular (v4) webpack (v3) over to use HappyPack and the build time has gotten MUCH faster so thank you for that.

However, I have gotten things to build and the initial module loads up just fine but there are no lazy loaded module chunks downloaded and when I click on a link that uses a lazy loaded module I get an error about the module could not be found. Here is some of my code. Any ideas on how I set this up for lazy loaded modules?

I use to use raw-loader for the index.html file but HappyPack does not support that so I tried file loader which works at least for the root module but maybe that is causing this issue?

 const HappyPack = require('happypack');
 const happyThreadPool = HappyPack.ThreadPool({ size: 3 });

...

 new HappyPack({
    id: 'ts',
    threadPool: happyThreadPool,
    loaders: [
      {
        loader: 'ts-loader',
        query: { happyPackMode: true }
      },
      {
        loader: 'angular2-template-loader',
        query: { keepUrl: true }
      },
    ]
  }),

  new HappyPack({
    id: 'json',
    threadPool: happyThreadPool,
    loaders: [ 'json-loader' ]
  }),
  
  new HappyPack({
    id: 'styles-string',
    threadPool: happyThreadPool,
    loaders: [ 'to-string-loader', 'css-loader' ]
  }),

  new HappyPack({
    id: 'styles',
    threadPool: happyThreadPool,
    loaders: [ 'to-string-loader', 'css-loader', 'postcss-loader', 'sass-loader' ]
  }),

  new HappyPack({
    id: 'file',
    threadPool: happyThreadPool,
    loaders: [ 'file-loader' ]
  }),

...

new CommonsChunkPlugin({
    name: 'polyfills',
    chunks: ['polyfills']
  }),
  // This enables tree shaking of the vendor modules
  new CommonsChunkPlugin({
    name: 'vendor',
    chunks: ['main'],
    minChunks: module => /node_modules\//.test(module.resource)
  }),
  // Specify the correct order the scripts will be injected in
  new CommonsChunkPlugin({
    name: ['polyfills', 'vendor'].reverse()
  }),

[labibramadhan]

Does your problem got resolved already? @GenZodd

I have to improve my angular build as well because the slowness of the source codes recompilation on development mode, maybe you can help by providing your changes on @angular/cli webpack configuration, thank you

[amireh]

Technically, enabling happypack shouldn't affect the generation of chunks, but maybe it's not working as you expect and then the chunks aren't generated in the first place? It's hard to tell without looking at logs.

Can you provide the output of webpack both while using happypack and while not? Run it with --display-chunks so that we can see the generated chunks and their hashes.