Merge build files into single one file in Angular 17

Question

After the migration of Angular 17 to vite, I encountered a problem that it was not possible to merge all new files into one single file without changing the builder to the old one @angular-devkit/build-angular:browser

Build occurs through a command ng build --output-hashing=none --configuration=production && node build.js

At the same time, the code in build.js is as simple as possible:

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

const componentPath = "./dist/build/bundle.js";

(async function build() {
    const files = [
        "./dist/angular-app/runtime.js",
        "./dist/angular-app/main.js",
        "./dist/angular-app/polyfills.js"
    ].filter(x => fs.pathExistsSync(x));
    await fs.ensureFile(componentPath);
    await concat(files, componentPath);
})();

This code works fine when using the old builder, but with the new angular:application this approach does not work - an error is thrown

Any ideas on how this can be fixed?

Answer 1

Solution for Angular 17: add vite and rewrite build.js to:

import "./dist/angular-app/browser/polyfills";
import "./dist/angular-app/browser/main";

vite.config.js:

import { defineConfig } from "vite";

export default defineConfig({
    build: {
        rollupOptions: {
            output: {
                entryFileNames: "[name].js"
            },
            input: "build.js"
        },
        outDir: "./dist/build"
    }
});

then you can run: ng build --output-hashing=none --configuration=production && vite build