Disable code splitting about angular-cli HOT 7 CLOSED

Duplicate of #26478 and #26832

from angular-cli.

@alan-agius4 Please don't close this so suddenly.

It's not a direct duplicate, #26478 was about single-entry. We'd really want a single-file.

That issue refers to #23574 where you state:

This is currently not in scope of the webpack based builder.
This however is possible using the esbuild builder by putting all the polyfills and scripts into the main file.

Your statement on this contradicts my experience. In the webpack based builder, it was possible, though indeed not in scope of the builder. In the esbuild based builder, it seems impossible.

I can't find any documentation backing your statement, and I have not found a way to actually do that. If this truly is possible, could you point out how?

I've put the polyfills into the main.ts. I don't have any scripts. But I still end up with 12 chunks (polyfills is gone):

  chunk-CGT2X6C5.js
  chunk-KOPSFDZE.js
  chunk-PZJJYAMS.js
  decoder-LCJLRLPY.js
  deflate-ZSPXRSXJ.js
  jpeg-OX3M3M6U.js
  lerc-T3HVF324.js
  lzw-UTG2IYYK.js
  main.js
  packbits-VLAADFFN.js
  raw-S76QM7G4.js
  webimage-B5RQHO6U.js

from angular-cli.

With the esbuild based builder, you can create a single bundle as explained in the above linked issue. For quick reference here's the comment #26478 (comment)

from angular-cli.

I have read that comment, but I guess I'm completely failing to understand it.

If you do not use dynamic importing then there will be a single main JavaScript file and the polyfills JavaScript file generated in the output.

1. I've managed to eliminate the polyfill as per your recommendation to add it to main.ts.
2. I do not use dynamic imports.

Step 1 does work as you said. However step 2 doesn't result at all in: "there will be a single main JavaScript file". I'm still stuck with 12 files.

from angular-cli.

This should not be case, unless a dynamic import or some form of lazy-loading is used. It can also be that one of the libraries that you dependent on is using dynamic imports.

In which case, you can run esbuild or another bundler on your main.js to concat it.

from angular-cli.

Ah, thanks, I'll look into doing that.

from angular-cli.

Thank you so much!

Apparently I really can't control the code splitting, but bundling the split results with esbuild in a post-build step works smoothly.

This is now run by my npm postbuild command:

#!/bin/env node
{
  const esbuild = require('esbuild');
  const { mkdirSync } = require('fs');

  const srcDir = 'dist/fooComponent/browser';
  const destDir = 'dist/components';
  const destFileName = 'fooComponent.js';

  mkdirSync(destDir, { recursive: true });

  console.log(`Bundling ${destFileName}…`);
  esbuild
    .build({
      entryPoints: [`${srcDir}/main.js`],
      bundle: true,
      minify: true,
      sourcemap: false,
      outfile: `${destDir}/${destFileName}`,
      format: 'esm',
    })
    .then(
      () => console.info(`${destFileName} created successfully!`),
      (error) => console.error(error),
    );
}

from angular-cli.