Dave Bosley
Jul 28, 2017 · 1 min read

I’m having a couple issues with this configuration. I’m using webpack with an Angular project and I wanted to share my workarounds:

  • The ‘runtime’ file you create to store the webpack manifest doesn’t get a new hash when its contents change.
    My solution: I use the ‘inline-manifest-webpack-plugin’ (on npm) and add <%= htmlWebpackPlugin.files.webpackManifest %> to my index.html
  • Angular uses a special syntax in the routers to lazy-load modules. When this is done, it splits out chunks in the webpack output. These chunks don’t have names by default, and your use of the NamedChunksPlugin didn’t work for me. (Some modules wouldn’t have the 2 paths it compares to create a chunk name.)
    My solution: I use the ‘ng-router-loader’ (on npm) which lets you add a chunkName property to the lazy loaded module strings. And when using the NamedChunksPlugin, I did not pass in a custom method to generate names. Route example:
{
path: “some/route”,
loadChildren: “app/some.module#TheModule?chunkName=TheModule”,
}

    Dave Bosley

    Written by

    Software engineer, dog lover, gamer.

    Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
    Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
    Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade