如何将Angular Elements封装的Web Component发布为可导入的npm包

完全可以将使用Angular Elements封装为Web Component的Angular应用发布为npm包，无需手动复制脚本到消费项目的angular.json配置中，具体操作步骤如下：

1 调整项目构建配置 #

优先推荐将Web Component逻辑迁移到Angular Library项目中进行开发，更适配npm包发布场景；如果保留原应用项目开发模式，做如下调整：

• 安装ngx-build-plus用于生成单bundle构建产物：

npm install ngx-build-plus --save-dev

• 修改angular.json中的build配置，替换默认构建器、开启单bundle输出：

{
  "projects": {
    "你的项目名": {
      "architect": {
        "build": {
          "builder": "ngx-build-plus:browser",
          "options": {
            "outputHashing": "none",
            "singleBundle": true,
            "namedChunks": false
          }
        }
      }
    }
  }
}

• 给Web Component组件添加ShadowDom样式封装，避免样式泄露到消费项目：

@Component({
  selector: 'app-explorer',
  templateUrl: './explorer.component.html',
  styleUrls: ['./explorer.component.css'],
  encapsulation: ViewEncapsulation.ShadowDom // 新增该行
})
export class ExplorerComponent { /* 原有逻辑 */ }

2 配置npm包发布参数 #

在项目根目录的package.json中补充发布相关配置：

{
  "name": "你的npm包名",
  "version": "1.0.0",
  "main": "./dist/你的项目名/main.js", // 对应构建后的单bundle入口
  "module": "./dist/你的项目名/main.js",
  "typings": "./dist/你的项目名/index.d.ts", // 需导出TS类型时配置该项
  "peerDependencies": {
    "@angular/core": "^16.0.0", // 填入你开发使用的Angular版本范围
    "@angular/common": "^16.0.0",
    "@angular/platform-browser": "^16.0.0",
    "rxjs": "^7.0.0",
    "zone.js": "^0.13.0"
  }
}

• 新增public-api.ts作为包的导出入口，保证消费方安装后只要导入该包就会自动注册<plots-element>自定义标签：

// public-api.ts
import './src/main.ts'; // 对应你原有启动AppModule的入口文件

3 本地测试验证 #

• 执行ng build构建项目，得到dist目录的产物
• 在dist目录下执行npm link，将本地包注册到全局npm缓存
• 在消费项目中执行npm link 你的npm包名，关联本地开发的包
• 在消费项目的main.ts或者app.module.ts顶部添加导入语句：

import '你的npm包名';

无需再在angular.json中添加脚本配置，直接在模板中使用<plots-element>即可正常渲染组件。

4 发布到npm仓库 #

本地测试通过后，执行npm publish即可将包发布到公共npm仓库或者私有npm仓库，后续其他项目直接执行npm install 你的npm包名导入使用即可。

注意事项 #

• 自定义元素的标签名<plots-element>需要保证全局唯一，避免和其他Web Component冲突
• 如果消费项目也是Angular应用，不需要重复导入zone.js，依赖会自动复用消费项目的zone.js实例
• 如果需要对外暴露组件的输入输出属性，可以在包的导出文件中补充对应类型定义，方便消费方做TypeScript类型校验

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