Single bundle file using ESBUILD

Question

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.

Answer 1

Recently struggled with a similar requirement. Tried the last comment on this post: https://www.reddit.com/r/Angular2/comments/1cstcc0/single_bundle_file_using_esbuild/

const folder = 'dist/browser/';
const fs = require('fs');
let content = 'import "' + folder + 'polyfills.js";\n';
fs.readdirSync(folder).forEach((file) => {
  if (file.substring(file.length - 3) === '.js' && file !== 'polyfills.js') {
    content += 'import "' + folder + file + '";\n';
  }
});
fs.writeFile(folder + 'bundle.ts', content, (err) => {
  if (err) {
    console.error(err);
  } else {
    console.log('file written successfully');
  }
});

And keep in mind to use outputHashing: none and then executing:

esbuild dist/browser/bundle.ts --bundle --minify --outdir=dist/browser

The resulting bundle contains the whole Angular application so you can import it in your index.html Just beware you might have to do some minor adjustments, but it works.