如何在现有Angular应用中嵌入Node-RED编辑器？

以下是两种可行的实现思路，涵盖快速集成和深度定制两种场景：

方案一：iframe嵌入（快速落地） #

这是最直接的方式，利用Node-RED编辑器本身的Web特性嵌入到Angular组件中：

• 部署独立的Node-RED服务，确保其可被Angular应用访问（同域名优先，跨域需配置CORS）
• 在Angular组件模板中添加iframe容器：

  <iframe 
    id="node-red-editor"
    src="http://your-node-red-instance/editor" 
    style="width: 100%; height: calc(100vh - 60px); border: 0;"
    [hidden]="!editorVisible">
  </iframe>
  

• 身份认证处理：
  • 同域名下，Angular完成登录后，认证Cookie会自动共享给iframe
  • 跨域场景下，可在Angular端获取JWT令牌，通过postMessage传递给Node-RED编辑器，再由编辑器在API请求中携带令牌
• 工作流数据交互：
  • Angular端发送消息至编辑器：

    sendFlowDataToEditor(flowData: any) {
      const iframe = document.getElementById('node-red-editor') as HTMLIFrameElement;
      iframe.contentWindow?.postMessage({ type: 'import-flow', data: flowData }, 'http://your-node-red-instance');
    }
    

  • Node-RED端监听消息（可通过自定义编辑器脚本实现）：

    window.addEventListener('message', (event) => {
      if (event.origin !== 'http://your-angular-app') return;
      if (event.data.type === 'import-flow') {
        RED.editor.importNodes(event.data.data);
      }
    });
    

方案二：深度集成（将编辑器资源嵌入Angular项目） #

如果需要更紧密的集成体验，可以将Node-RED编辑器的静态资源整合到Angular项目中：

1. 提取Node-RED编辑器资源：从node_modules/node-red/public/editor目录复制所有CSS、JS、HTML文件到Angular项目的assets/node-red-editor目录
2. 在Angular组件模板中引入依赖资源：

   <div id="node-red-container"></div>
   <link rel="stylesheet" href="assets/node-red-editor/css/vendor.css">
   <link rel="stylesheet" href="assets/node-red-editor/css/main.css">
   <script src="assets/node-red-editor/js/vendor.js"></script>
   <script src="assets/node-red-editor/js/main.js"></script>
   

3. 在组件的ngAfterViewInit钩子中初始化编辑器：

   ngAfterViewInit(): void {
     const editorConfig = {
       user: {
         username: this.currentUser.username,
         permissions: this.currentUser.permissions // 自定义权限控制
       },
       apiRoot: '/api/node-red',
       httpNodeRoot: '/api/nodes'
     };
     // @ts-ignore 忽略RED未声明的类型提示
     RED.init(document.getElementById('node-red-container'), editorConfig);
     // @ts-ignore
     RED.start();
   }
   

4. 配置Angular代理转发：创建proxy.conf.json将编辑器API请求转发到Node-RED后台服务：

   {
     "/api/node-red": {
       "target": "http://your-node-red-backend",
       "secure": false,
       "changeOrigin": true
     }
   }
   

5. 启动Angular时指定代理配置：ng serve --proxy-config proxy.conf.json

核心注意事项 #

• 多租户隔离：必须为每个客户配置独立的工作流存储，可通过Node-RED的自定义存储插件实现
• 版本兼容：Node-RED编辑器的依赖可能与Angular冲突，iframe方案能有效规避这类问题
• 性能优化：iframe嵌入时可通过懒加载、缓存编辑器资源提升加载速度

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