Unable to Dynamically Load Modules in Angular 5 and Hyperledger Composer

Question

I have built an Angular 5 application with the goal of loading a BusinessNetworkDefinition from a card archive. I cannot seem to figure out how to dynamically load modules in my Angular application. When I load the card archive file and then try to connect to a running business network via the following code, I receive an error.

  private fileAccepted(file: File): void {
    let fileReader = new FileReader();

    fileReader.readAsArrayBuffer(file);

    fileReader.onloadend = () => {
      this.cardService.importCard(fileReader.result).then((card) => {
        this.card = card;
        const connProfile = this.card.getConnectionProfile();
        this.connectionProfileManager.connectWithData(this.card.getConnectionProfile(), this.card.getBusinessNetworkName())
          .then((connection) => {
            console.log(connection);
          })
          .catch((err) => {
            console.log(err);
          });
      });
    }

Here is the error that this throws:

Error: Failed to load connector module "composer-connector-hlfv1" for connection type "hlfv1". curmod.require is not a function-connectionManagerLoader.require is not a function-Cannot find module "."
    at Promise.resolve.then (connectionprofilemanager.js:144)
    at ZoneDelegate.webpackJsonp../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:388)
    at Object.onInvoke (core.js:4760)
    at ZoneDelegate.webpackJsonp../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:387)
    at Zone.webpackJsonp../node_modules/zone.js/dist/zone.js.Zone.run (zone.js:138)
    at zone.js:872
    at ZoneDelegate.webpackJsonp../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:4751)
    at ZoneDelegate.webpackJsonp../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)
    at Zone.webpackJsonp../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)

To add a bit more context to the situation, I have also received the following error on compilation with webpack:

WARNING in ./node_modules/composer-common/lib/connectionprofilemanager.js
132:57-69 Critical dependency: the request of a dependency is an expression
 @ ./node_modules/composer-common/lib/connectionprofilemanager.js
 @ ./node_modules/composer-common/index.js
 @ ./src/app/services/identity-card.service.ts
 @ ./src/app/app.module.ts
 @ ./src/main.ts
 @ multi (webpack)-dev-server/client?http://localhost:4200 ./src/main.ts

I suspect that this has something to do with dynamically loaded modules, but I have looked at and tried all the solutions contained in the following issues/posts:

I was hoping that someone could explain technically what is going on here and where I should look for solutions. Thanks!

score 0 · Answer 1 · answered May 04 '18 at 10:36

I'm not that familiar with Angular but is this something to do with your module.exports in Angular - possibly in your ./app/routes module? Have you defined routes - some resources that may help -> NodeJs : TypeError: require(...) is not a function and Express discussion for similar issue here .

One last thing is to check also that composer npm modules were installed using npm install in your project and your package.json had the right dependencies.

Unable to Dynamically Load Modules in Angular 5 and Hyperledger Composer

1 Answers1