如何在React应用中集成Angular编写的npm包？求报错解决方案

问题背景 #

在React应用中尝试导入Angular编写的npm包test-widget-v1，导入语句为import {TestWidgetV1Component} from 'test-widget-v1'，出现模块解析及框架依赖相关报错。

核心原因 #

React项目默认没有配置Angular的编译运行环境，Angular组件依赖Angular框架的完整生态（如@angular/core、依赖注入、模板编译等机制），React的打包工具无法直接解析运行Angular组件类，直接导入必然报错。

可行的集成方案 #

1. 将Angular组件打包为Web Component（推荐） #

Angular支持将组件编译为标准Web Component（自定义元素），可在任意前端框架中无缝使用：

• 在Angular项目中，通过@angular/elements包将TestWidgetV1Component封装为自定义元素
• 打包生成独立的、包含所有依赖的JS文件
• 在React项目中引入该JS文件（可通过import或在public/index.html中添加<script>标签）
• 在React组件中直接使用自定义元素标签，例如：

function App() {
  return (
    <div>
      <test-widget-v1></test-widget-v1>
    </div>
  )
}

2. iframe嵌入独立Angular应用 #

将test-widget-v1组件部署为独立的Angular小应用，在React中通过<iframe>嵌入其访问地址：

function App() {
  return (
    <div>
      <iframe src="http://your-angular-widget-url" width="100%" height="300" frameBorder="0"></iframe>
    </div>
  )
}

• 优势：实现简单，完全隔离两个框架环境
• 劣势：跨框架通信、样式隔离需额外处理，性能略低

3. 框架适配层（不推荐生产环境） #

可尝试ng-react这类适配库，但此类库维护性差，仅适合小场景测试，不建议用于生产项目。

直接导入组件类的修复思路（不推荐） #

若非要尝试直接导入，需完成以下复杂配置，但维护成本极高：

• 在React项目中安装与test-widget-v1版本完全匹配的所有Angular依赖（@angular/core、@angular/common、@angular/compiler等）
• 配置React的打包工具（Webpack/Vite），添加Angular编译加载器（如@ngtools/webpack）
• 在React组件中手动初始化Angular运行环境，创建组件实例并挂载到DOM节点
  此方式会导致项目体积暴增，且两个框架的生命周期、状态管理易冲突，不建议采用。

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