Angular 17新构建器能否为Angular Elements生成单bundle文件？

核心结论 #

Angular 17的新@angular-devkit/build-angular:application构建器不自带单bundle打包功能，但可以通过自定义Webpack配置实现，无需依赖ngx-build-plus（该工具主要适配旧版browser构建器）。

具体实现步骤 #

1. 确认Angular Elements配置正确

确保组件已正确转为自定义元素，在app.module.ts中配置：

import { NgModule, Injector } from '@angular/core';
import { createCustomElement } from '@angular/elements';
import { MyWebComponent } from './my-web-component/my-web-component.component';

@NgModule({
  declarations: [MyWebComponent],
  imports: [],
  providers: [],
  bootstrap: [] // 移除默认bootstrap，改用ngDoBootstrap
})
export class AppModule {
  constructor(private injector: Injector) {}

  ngDoBootstrap() {
    const el = createCustomElement(MyWebComponent, { injector: this.injector });
    customElements.define('my-web-component', el);
  }
}

2. 添加自定义Webpack配置依赖

安装webpack-merge用于合并Angular默认配置与自定义配置：

npm install webpack-merge --save-dev

3. 创建自定义Webpack配置文件

在项目根目录创建webpack.config.js，配置单bundle输出、样式打包及代码压缩：

const { merge } = require('webpack-merge');
const TerserPlugin = require('terser-webpack-plugin');

module.exports = (config, options) => {
  return merge(config, {
    output: {
      filename: 'my-web-component.js', // 指定单bundle文件名
      library: {
        type: 'iife' // 打包为IIFE格式，方便非Angular项目通过<script>直接引入
      }
    },
    optimization: {
      splitChunks: false, // 禁用代码分割，确保所有代码打包到单个文件
      minimizer: [
        new TerserPlugin({
          terserOptions: {
            compress: true,
            mangle: true
          }
        })
      ]
    },
    module: {
      rules: [
        // 将样式打包到JS中，避免生成额外CSS文件
        {
          test: /\.css$/,
          use: ['style-loader', 'css-loader']
        }
      ]
    }
  });
};

提示：如果使用SCSS等预处理器，需添加对应loader（如sass-loader）调整规则。

4. 修改angular.json配置

在项目的architect.build节点中，添加自定义Webpack配置引用，并调整输出设置：

{
  "projects": {
    "your-project-name": {
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:application",
          "options": {
            // 保留原有配置，新增以下内容
            "outputPath": "dist/my-web-component",
            "customWebpackConfig": {
              "path": "./webpack.config.js",
              "mergeStrategies": {
                "output": "replace",
                "optimization.splitChunks": "replace"
              }
            },
            "outputHashing": "none", // 禁用资源哈希，保持文件名固定
            "bundleDependencies": "all" // 打包所有依赖到单文件中
          }
        }
      }
    }
  }
}

5. 构建并测试

运行构建命令：

ng build

构建完成后，dist/my-web-component目录下会生成单个my-web-component.js文件。在静态HTML中引入即可使用：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
</head>
<body>
  <my-web-component></my-web-component>
  <script src="./dist/my-web-component/my-web-component.js"></script>
</body>
</html>

注意事项 #

• 若组件依赖第三方库（如RxJS），bundleDependencies: "all"会将其一并打包，确保宿主项目无需额外引入依赖。
• 若需要ES模块格式，可将library.type改为'module'，但需确保宿主项目支持ES模块引入。
• 测试时注意清除浏览器缓存，避免加载旧的构建文件。

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