angularangular-cliangular-devkit

Merge build files into single one file in Angular 17


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?


Solution

  • 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