如何在Angular项目中嵌入React组件并使用angular-cli构建？

嘿，这个场景我之前帮团队落地过，完全可以实现！核心思路是把你的React组件打包成Web Component（自定义元素），这样Angular项目里不用直接导入JSX或CSS文件，只需要引入打包好的独立脚本，就能像用普通HTML标签一样调用React组件。下面是具体步骤：

1. 把React组件转为Web Component #

我们可以用@r2wc/react-to-web-component这个工具快速封装，它能帮我们把React组件转换成标准的自定义元素：

• 先安装依赖：

  npm install @r2wc/react-to-web-component
  

• 创建一个入口文件（比如react-web-component-wrapper.jsx），把React组件和它的样式一起包裹进去：

  import React from 'react';
  import r2wc from '@r2wc/react-to-web-component';
  import MyReactComponent from './path/to/your/ReactComponent';
  import './path/to/your/ReactComponent.css'; // 直接引入CSS，后续打包会处理
  
  // 定义组件接收的属性类型（可选，用于类型校验）
  const MyWebComponent = r2wc(MyReactComponent, {
    props: {
      username: "string",
      isActive: "boolean"
    },
    shadowDom: true // 启用Shadow DOM，隔离组件样式和Angular样式
  });
  
  // 注册自定义元素
  customElements.define('my-react-widget', MyWebComponent);
  

2. 打包Web Component为独立脚本（包含CSS） #

用Webpack或Rollup把上面的入口文件打包成一个独立的JS文件，确保把CSS内联到JS里（避免单独导入CSS）。以Webpack为例，配置大概是这样：

module.exports = {
  entry: './react-web-component-wrapper.jsx',
  output: {
    filename: 'my-react-widget.js',
    path: './dist'
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        use: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'] // 将CSS转为JS内联的样式片段
      }
    ]
  },
  resolve: {
    extensions: ['.js', '.jsx']
  }
};

运行打包命令后，你会得到一个my-react-widget.js，里面包含了React组件的所有逻辑和样式。

3. 在Angular项目中引入并使用 #

• 把打包好的my-react-widget.js放到Angular项目的src/assets文件夹下。
• 在angular.json的architect.build.options.scripts里添加脚本路径（确保构建时自动引入）：

  "scripts": [
    "src/assets/my-react-widget.js"
  ]
  

• 在Angular模块中启用自定义元素支持，修改app.module.ts：

  import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
  
  @NgModule({
    declarations: [/* 你的组件 */],
    imports: [/* 你的模块 */],
    schemas: [CUSTOM_ELEMENTS_SCHEMA] // 允许使用自定义HTML标签
  })
  export class AppModule { }
  

• 最后，直接在Angular组件的模板里用自定义标签调用：

  <my-react-widget username="Angular User" [isActive]="true"></my-react-widget>
  

额外注意点 #

• 如果React组件依赖第三方库（比如Ant Design），打包时可以选择把依赖打包进脚本，或者通过externals配置让它复用Angular项目里的相同依赖（减少体积）。
• Shadow DOM的样式隔离如果导致组件样式异常，可以调整r2wc的配置，或者用CSS变量统一管理样式。

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