现有Angular项目中创建Web Component的可行性及构建问题咨询

疑问1：现有应用直接导出部分组件为独立web component的可行性 #

该方案完全可行，不需要单独创建独立项目开发web component。Angular Elements本身就支持从现有业务项目的已有组件中封装导出为标准web component，无需迁移组件到新仓库。

疑问2：当前配置和构建流程的问题 #

你当前的操作不会生成独立组件产物是正常情况，核心问题是你使用了主应用的默认构建流程，自然只会输出完整的应用产物，和你是否加了自定义元素注册逻辑没有关系。需要做如下调整：

• 单独新建一个专属模块用来管理所有要导出的web component，不要把注册逻辑写在主应用的AppModule中。该模块不需要启动主应用根组件，只需要完成createCustomElement注册、customElements.define声明的逻辑即可。
• 如果你使用的是Angular 13以下的版本，要导出的组件必须加入到模块的entryComponents数组中，避免构建时被摇树优化删除；如果是Angular 14+版本，可以直接将组件设置为独立组件（standalone: true）。
• 在angular.json中新增一个独立的构建目标，专门用于打包web component模块，不要和主应用的构建配置复用。可以配合ngx-build-plus工具自定义构建逻辑，剔除主应用的冗余代码、合并打包产物为单文件等。
• 构建时执行对应专属构建目标的命令，不要直接用默认的主应用构建命令，例如你新增的构建目标名为ui-button-lib，则执行ng build ui-button-lib --prod --output-hashing none，即可在dist目录下生成对应组件的独立构建产物。

补充说明：如果只需要导出少量组件，也可以使用Angular库（Library）能力，先将组件封装为Angular库，再在库中打包导出为web component，构建逻辑会更清晰，也方便后续维护多个导出组件。

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