Angular 18自定义Vite配置方法咨询（含模块联邦需求）

项目配置背景 #

我的Angular项目angular.json中的build配置片段如下：

"architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:application",
          "options": {
            "outputPath": "dist/angular18",
            "index": "src/index.html",
            "browser": "src/main.ts",
            "polyfills": [
              "zone.js"
            ],
            "tsConfig": "tsconfig.app.json",
            "inlineStyleLanguage": "less",
            "assets": [
              {
                "glob": "**/*",
                "input": "public"
              }
            ],
            "styles": [
              "src/styles.less"
            ],
            "scripts": []
          },
          ...
}

咨询问题 #

我希望通过Vite实现模块联邦功能，但不清楚如何像使用@angular-builders/custom-webpack那样自定义Vite配置。现咨询：

1. 是否存在类似@angular-builders/custom-webpack的@angular-builders/custom-vite工具包？
2. 或者有其他可行的Vite配置自定义方案？

1. 关于@angular-builders/custom-vite工具包 #

目前官方的@angular-builders生态中并没有推出custom-vite这类工具包，现有工具主要集中在Webpack相关的自定义扩展上。

2. 自定义Vite配置的可行方案 #

针对Angular 18+使用Vite作为构建器的项目，有两种主流方式自定义Vite配置：

方式一：通过angular.json直接指定Vite配置文件

在angular.json的build配置中，添加viteConfig字段指定自定义配置文件路径：

"architect": {
  "build": {
    "builder": "@angular-devkit/build-angular:application",
    "options": {
      // 原有配置...
      "viteConfig": "vite.config.ts"
    }
  }
}

然后在项目根目录创建vite.config.ts，编写模块联邦相关配置：

import { defineConfig } from 'vite';
import federation from '@originjs/vite-plugin-federation';

export default defineConfig({
  plugins: [
    federation({
      name: 'angularHost',
      remotes: {
        // 配置远程模块示例
        reactRemote: 'http://localhost:5001/assets/remoteEntry.js'
      },
      exposes: {
        // 暴露本地模块供其他应用调用示例
        './Button': './src/app/components/button/button.component.ts'
      },
      shared: ['@angular/core', '@angular/common']
    })
  ]
});

方式二：合并Angular默认Vite配置与自定义配置

利用Angular提供的mergeConfig函数，将官方预设配置和自定义配置合并，确保兼容性：

import { defineConfig, mergeConfig } from 'vite';
import { angularVitePreset } from '@angular-devkit/build-angular';
import federation from '@originjs/vite-plugin-federation';

export default mergeConfig(
  angularVitePreset,
  defineConfig({
    plugins: [
      federation({
        // 模块联邦具体配置
      })
    ]
  })
);

同样在angular.json中通过viteConfig字段指定该文件路径即可。

注意事项 #

• 先安装模块联邦依赖：npm install @originjs/vite-plugin-federation --save-dev
• 模块联邦的name、remotes、exposes参数需要根据你的宿主/远程应用角色调整
• 仅Angular 18及以上版本默认使用Vite构建器，低版本需先升级或手动切换构建器

内容的提问来源于stack exchange，提问作者chen jack