在 Angular 17 中将构建文件合并为单个文件

Question

Angular 17 迁移到 vite 后，我遇到了一个问题，如果不将构建器更改为旧的构建器，就无法将所有新文件合并到一个文件中 @angular-devkit/build-angular:browser

通过命令进行构建

ng build --output-hashing=none --configuration=production && node build.js

同时build.js中的代码也尽可能简单：

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);
})();

使用旧的构建器时，此代码工作正常，但使用新的 Angular:application 时，此方法不起作用 - 会引发错误

关于如何解决这个问题有什么想法吗？

Answer 1

Angular 17 的解决方案： 添加vite并重写build.js为：

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"
    }
});

然后你可以运行：

ng build --output-hashing=none --configuration=production && vite build