Support ESM applications and configs

this package cannot be used with es modules (i.e packages that have type: module)

in this line you are using require() to load the custom webpack config file. if custom.webpack.config.ts is inside an es module, you must use import()

// should be replaced with `import(path)`
  const customWebpackConfig = require(path);

also it has to handle webpack.config that written in typescript i.e custom.webpack.ts you will need to pass --experimental-specifier-resolution=node to ts-node, so it can work with .ts

I use Angular v13 and custom-webpack v13

minimal reproduction run ng build

[eng-dibo]

why would you need "type": "module" in an Angular app? Just curious.

1. your project may include other stuff than Angular. Angular itself doesn’t force switching to esm, but other situations may be involved.
2. you may depend on esm packages that don’t compatible with commonjs (using condition exports for example)
3. you may need to get benefits from migrating to esm, like using imports to enable path aliasing natively

[just-jeb]

It is an existing feature, no need to add it, just need to support ESM.
The reasons for its existence are mostly historical. Originally index.html was being generated as part of the webpack build and at some point it had been separated into a stand alone process that runs after the webpack build, but still as part of the build-angular builders.
Since it’s performed in the same builder in Angular CLI, you can’t really separate this functionality into a separate builder.
Maybe if they switch it to multiple aggregated builders later on we’ll revise it again.

I like to think of it as a repurposing of custom-webpack builder. In this context custom-webpack builder is not just a Custom Webpack builder, it’s more like extended-angular-builder, which has the functionality of webpack config modification and indexTransform.

Although semantics is important I don’t think it’s a good enough reason to rename the package 😅