chunkName not displayed in angular 8 lazy loading with webpack 4

Question

LazyLoading chunkName is not being displayed

webpack.config.js

const webpack = require('webpack');
const path = require('path');

var PROD = JSON.parse(process.env.PROD_ENV || '0');

module.exports = {
    entry: {
        clientApp: "./App/Modules/main",
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: "[name].bundle.js",
        chunkFilename: '[name]-[chunkhash].js',
        publicPath: '/dist/',
    },
    resolve: {
        extensions: ['.js']
    },
    module: {
        loaders: [ 
            'angular-router-loader'
        ]
    },

    plugins: [
    ]
}

app.routing.ts

{
                path: 'about',     
                loadChildren: () => import('../Features/about/about.module').then(m => m.AboutModule)   
            }

It is not displaying module name for the chunk. what am i doing wrong here?

Answer 1

The way that Angular named the chunks with the old string based loadChildren attribute was with a custom Angular webpack plugin similar to this one. The way that named code spliting chunks is done with straight webpack is with "Magic Comments" specifically the webpackChunkName comment - when I test this, it works for my development build, but as soon as I switch to a production build, it goes away and I am back to enumerated JavaScript files. Here is what my import looked like:

{
  path: 'account',
  loadChildren: () => import(/* webpackChunkName: "account" */ './account/account.module')
    .then((m) => m.AccountModule)
}

When this was done, my chunk gets the name account.js when built for dev, but when built for production, it is still 1.js. I don't know the exact reason that the production build differs, maybe a conflict with another webpack plugin, maybe it is related to AOT, it is hard to know for sure.

I do not think that Google/Angular will publish a webpack plugin because this problem is 1.) not really blocking development (we can just rely on source maps), 2.) simply low priority. Writing a plugin for this means supporting even more code. Here is a bug report where they state as much: https://github.com/angular/angular-cli/issues/16697 named chunks with magic comments is not something they test for, so it will likely not work.

While the string method of async loading children of a route is deprecated, it still works and we can still use it to name chunks.