如何在Angular4中使用Hyperledger Composer事件订阅器并解决依赖警告

首先，咱们得先搞清楚这个警告的来头：你遇到的Critical dependency: the request of a dependency is an expression是Webpack（Angular CLI背后的打包工具）抛出的，原因是composer-client库内部使用了动态模块引用（比如用字符串表达式来require模块），Webpack没办法静态分析这些引用路径，所以会报这个警告。下面是一步步的解决办法：

1. 调整TypeScript配置，兼容CommonJS模块 #

Hyperledger Composer的依赖大多是CommonJS格式的，而Angular默认偏向ES模块，所以先修改tsconfig.json：

{
  "compilerOptions": {
    // 其他配置保持不变
    "module": "commonjs",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true
  }
}

修改后记得重启Angular开发服务器，让配置生效。

2. 配置Webpack忽略特定警告（针对Angular CLI） #

如果你用的是Angular CLI，需要自定义Webpack配置来抑制这个警告。步骤如下：

• 先安装自定义Webpack构建器依赖：

npm install @angular-builders/custom-webpack --save-dev

• 在项目根目录创建webpack.extra.js文件，添加以下内容：

module.exports = {
  module: {
    exprContextCritical: false
  }
};

这个配置会告诉Webpack不要对动态依赖引用抛出Critical级别的警告。

• 然后修改angular.json（Angular CLI 6+）或者.angular-cli.json（老版本），替换构建器并添加自定义配置：
  找到architect -> build -> builder，替换为@angular-builders/custom-webpack:browser，同时添加customWebpackConfig字段：

"architect": {
  "build": {
    "builder": "@angular-builders/custom-webpack:browser",
    "options": {
      "customWebpackConfig": {
        "path": "./webpack.extra.js"
      },
      // 保留其他原有配置...
    }
  },
  "serve": {
    "builder": "@angular-builders/custom-webpack:dev-server",
    // 保留其他原有配置...
  }
}

3. 修正Angular组件中的代码写法 #

你原来的组件代码有语法错误，TypeScript里不能在类内部用var，而且要通过new来实例化BusinessNetworkConnection。同时可以用async/await简化Promise逻辑，去掉冗余的JSON转换：

import { Component, OnInit } from '@angular/core';
import { BusinessNetworkConnection } from 'composer-client';

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {
  private businessNetworkConnection: BusinessNetworkConnection;

  constructor() {
    this.businessNetworkConnection = new BusinessNetworkConnection();
  }

  ngOnInit() {
    this.initConnectionAndListen();
  }

  private async initConnectionAndListen() {
    try {
      const businessNetworkDefinition = await this.businessNetworkConnection.connect('admin@resumenetwork');
      this.listenForEvents();
    } catch (error) {
      console.error('网络连接失败:', error);
    }
  }

  private listenForEvents() {
    this.businessNetworkConnection.on('event', (event) => {
      // 直接访问事件属性，无需JSON转换
      console.log('证书名称:', event.txForUser.certificateName);
      console.log('证书分数:', event.txForUser.certificateScore);
      console.log('机构ID:', event.txForUser.organizationId);
      console.log('机构名称:', event.txForUser.organizationName);
      console.log('出生日期:', event.txForUser.dob);
      console.log('过期日期:', event.txForUser.expirationDate);
      console.log('是否公开:', event.txForUser.isPublic);
      console.log('用户ID:', event.txForUser.userId);
      console.log('时间戳:', event.txForUser.timestamp);
    });
  }
}

4. 处理Zone.js视图更新问题（可选） #

如果事件触发后Angular视图没有自动更新，说明事件监听运行在Angular的Zone之外，可以手动用NgZone包裹逻辑：

import { NgZone } from '@angular/core';

// 在组件构造函数注入NgZone
constructor(private ngZone: NgZone) {
  this.businessNetworkConnection = new BusinessNetworkConnection();
}

// 修改事件监听方法
private listenForEvents() {
  this.businessNetworkConnection.on('event', (event) => {
    this.ngZone.run(() => {
      // 这里处理事件，视图会自动刷新
      console.log('证书名称:', event.txForUser.certificateName);
    });
  });
}

按照上面的步骤操作后，那些Critical依赖警告应该就会消失，同时你的事件订阅逻辑也能正常运行了。

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