如何将Angular自定义Web组件发布为npm包并跨框架使用？

当然可以实现，以下是具体操作步骤：

一、项目配置：将Angular组件转为Web组件 #

1. 安装Angular Elements依赖
   在现有Angular项目中执行：

   ng add @angular/elements
   # 或手动安装
   npm install @angular/elements --save
   

2. 注册自定义元素
   在app.module.ts中，将目标组件转为自定义元素并注册到浏览器的自定义元素注册表：

   import { BrowserModule } from '@angular/platform-browser';
   import { NgModule, Injector } from '@angular/core';
   import { createCustomElement } from '@angular/elements';
   import { YourCustomComponent } from './your-custom-component/your-custom-component.component';
   
   @NgModule({
     declarations: [YourCustomComponent],
     imports: [BrowserModule],
     entryComponents: [YourCustomComponent] // Angular 9+可省略，但兼容旧版本建议保留
   })
   export class AppModule {
     constructor(private injector: Injector) {
       // 将组件转为自定义元素
       const customElement = createCustomElement(YourCustomComponent, { injector });
       // 注册自定义元素，标签名需为kebab-case格式
       customElements.define('your-custom-component', customElement);
     }
   
     // 避免启动Angular应用（因为我们只需要打包Web组件）
     ngDoBootstrap() {}
   }
   

二、打包配置：生成独立可复用的资源 #

1. 基础打包命令
   执行打包命令，关闭输出哈希以便生成固定文件名：

   ng build --prod --output-hashing none
   

   打包后会在dist/your-project-name下生成runtime.js、polyfills.js、main.js和styles.css等文件。

2. 合并资源（可选但推荐）
   用concat工具合并JS和CSS文件，方便外部项目引用：

   # 安装concat工具
   npm install concat --save-dev
   # 合并JS文件
   npx concat dist/your-project-name/{runtime,polyfills,main}.js dist/your-project-name/web-component.js
   # 合并CSS文件
   npx concat dist/your-project-name/styles.css dist/your-project-name/web-component.css
   

   若想简化流程，也可使用ngx-build-plus插件一键生成单文件：

   ng add ngx-build-plus
   ng build --prod --single-bundle true
   

三、npm发布配置 #

修改项目根目录的package.json，配置发布相关字段：

{
  "name": "your-web-component-name", // 需在npm上唯一
  "version": "1.0.0",
  "description": "可跨框架使用的Angular自定义Web组件",
  "main": "dist/your-project-name/web-component.js", // 指向合并后的JS文件
  "styles": ["dist/your-project-name/web-component.css"], // 指向合并后的CSS文件
  "files": [
    "dist/your-project-name/**/*" // 指定要发布到npm的文件
  ],
  "private": false, // 必须设为false才能发布
  "keywords": ["angular", "web-component", "custom-element"]
}

四、本地跨框架测试 #

在发布前先验证组件在不同框架中的可用性：

• Angular项目：安装组件后，在app.module.ts中导入并声明，或直接在模板中使用<your-custom-component>标签（需确保Angular已引入Web组件支持）。
• React项目：在public/index.html中引入组件的JS和CSS文件，然后在React组件中直接使用自定义标签：

  function App() {
    return (
      <div className="App">
        <your-custom-component user-name="test"></your-custom-component>
      </div>
    );
  }
  

• Vue项目：在public/index.html中引入资源，然后在vue.config.js中配置忽略自定义元素检测：

  module.exports = {
    configureWebpack: {
      module: {
        rules: [
          {
            test: /\.vue$/,
            loader: 'vue-loader',
            options: {
              compilerOptions: {
                isCustomElement: tag => tag.startsWith('your-')
              }
            }
          }
        ]
      }
    }
  }
  

  之后即可在Vue组件中直接使用自定义标签。
• EJS/静态页面：直接在HTML中引入JS和CSS，然后使用<your-custom-component>标签。

五、发布至npm #

1. 登录npm账号（若未注册需先在npm官网注册）：

   npm login
   

2. 执行发布命令：

   npm publish
   

   若发布私有包，需添加--access private参数。

注意事项 #

• 输入属性：Angular组件的@Input()采用camelCase命名，在自定义元素中需转为kebab-case（如userName对应user-name）。
• 输出事件：Angular组件的@Output()事件在自定义元素中需用addEventListener监听（如userClicked事件对应监听user-clicked）。
• 兼容性：若需兼容旧浏览器，需引入@webcomponents/webcomponentsjs polyfill，可在打包时包含或告知使用者自行引入。

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