Angular 5与Hyperledger Composer中无法动态加载模块求助

核心问题分析 #

你遇到的问题本质是Angular 5的静态模块打包机制，和Hyperledger Fabric Composer的动态依赖加载逻辑不兼容——直接用FileReader加载卡片归档后调用cardService.import，很容易出现模块解析失败、业务网络定义无法动态加载的情况。下面给你分步梳理解决方法：

分步解决方法 #

1. 先确保依赖包版本匹配 #

Angular 5对依赖版本比较敏感，建议安装适配的Composer系列包，在项目根目录执行：

npm install --save fabric-composer@0.20.x fabric-composer-angular@0.20.x fabric-composer-common fabric-composer-client

尽量锁定0.20.x版本，避免版本不兼容导致的奇怪问题。

2. 修正卡片归档加载与业务网络连接逻辑 #

你的FileReader代码需要补充异步处理逻辑，确保卡片导入后能正确加载BusinessNetworkDefinition，调整后的代码如下：

private fileAccepted(file: File): void {
  const fileReader = new FileReader();
  fileReader.readAsArrayBuffer(file);
  fileReader.onloadend = async () => {
    try {
      // 第一步：将卡片归档导入到浏览器存储
      const importedCard = await this.cardService.import(fileReader.result as ArrayBuffer);
      
      // 第二步：从导入的卡片中提取连接所需信息
      const connectionProfile = importedCard.getConnectionProfile();
      const credentials = importedCard.getCredentials();
      const networkName = importedCard.getBusinessNetworkName();

      // 第三步：创建连接并动态加载业务网络定义
      const connection = new BusinessNetworkConnection();
      await connection.connect(connectionProfile, importedCard.getName(), credentials);
      const businessNetworkDefinition = await connection.getBusinessNetwork();
      
      // 到这里就可以用businessNetworkDefinition做后续操作了，比如获取交易、模型等
      console.log('成功加载业务网络:', businessNetworkDefinition.getName());
    } catch (error) {
      console.error('加载失败:', error);
      // 这里可以加个用户友好的提示，比如弹出错误弹窗
    }
  };
}

3. 解决Angular打包时的动态模块缺失问题 #

Angular 5的webpack会静态分析依赖，Composer的动态加载模块（比如业务网络的JS逻辑）会被遗漏，需要修改配置文件：

• 如果是旧版的.angular-cli.json，找到apps[0].scripts数组，添加：

"scripts": [
  "./node_modules/fabric-composer/lib/browser.js"
]

• 如果是angular.json，在projects.your-project-name.architect.build.options.scripts中添加上述路径。

4. 配置浏览器兼容的卡片存储 #

确保CardService使用浏览器本地存储来保存卡片，在组件或服务的构造函数中初始化：

import { BrowserCardStore } from 'fabric-composer-angular';

constructor(private cardService: CardService) {
  // 替换默认存储为浏览器本地存储
  this.cardService.setCardStore(new BrowserCardStore());
}

常见错误排查 #

• 出现Cannot find module：检查依赖是否安装完整，webpack配置是否添加了Composer的浏览器脚本。
• 连接超时：确认Fabric网络正在运行，卡片中的连接配置正确指向网络节点。
• 权限错误：检查卡片里的凭证是否有效，是否有权限访问目标业务网络。

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