[SOLVED] Single bundle file using ESBUILD

Single bundle file using ESBUILD

I have created a new project which consist on a web-component created with angular-elements. I'm using angular 17 and the new default builder '@angular-devkit/build-angular:application'.

As this web component will be used in non-angular apps, I would like to have a single bundle file containing all the required code. I know people uses the ngx-build-plus compiler in order to configure webpack and do this, but is there any possibility to do this with the new compiler?"

I have already tested importing all the files from the build into a static html file, and it currently works.

But im expecting to be able to merge all of this files into a single one.

Solution

I have ended up using rollup to solve this problem, also because I wanted to include styles and assets in the same bundle.

My rollup config looks something like this:

import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import terser from '@rollup/plugin-terser';
import babel from '@rollup/plugin-babel';
import multiEntry from '@rollup/plugin-multi-entry';
import postcss from 'rollup-plugin-postcss';

export default {
  input: [
    'dist/my-angular-app/browser/*.js',
  ],
  output: {
    file: 'dist/single/bundle.js',
    format: 'iife',
    name: 'MyWebComponent',
    sourcemap: false,
  },
  plugins: [
    multiEntry(),
    resolve(),
    commonjs(),
    postcss({
      inject: true,
      extract: true,
      minimize: true,
    }),
    babel({
      babelHelpers: 'bundled',
      exclude: 'node_modules/**',
      compact: true,
    }),
    terser(),
  ]
};

Hope that this helps someone else.