Bundling Angular Element into a Single File

Question

I am building a Web Component with Angular Element (version 13) and I have a question regarding bundling .

Would it be possible to the build the Web Component in a way that all of the js bundles (main.js, runtime.js and polyfills.js) and the css and the svg icons in the /assets folder are in a single js file at the end?

What I am doing right now is running ng build --configuration element --output-hashing none && node build.js where build.js includes is:

const fs = require('fs-extra');
const concat = require('concat');

(async function build() {
  const files = [
    './dist/runtime.js',
    './dist/polyfills.js',
    './dist/main.js'
  ];

  await concat(files, './dist/webcomp-ecar-friendly-accommodations.min.js');
  await fs.remove('./dist/runtime.js')
  await fs.remove('./dist/polyfills.js')
  await fs.remove('./dist/main.js')
})();

Is there a way to bundle also the css file and the /assets in the same js bundle? I do know it is done with Webpack in other applications but I am not sure how to do that with the Angular CLI.

Any input would be very appreciated!

Answer 1

I recommend that you look into this. ngx-build-plus https://www.npmjs.com/package/ngx-build-plus