Angular-cli: 3rd Party Library Installation with webpack

[carlosfaria94]

Hi, I'm trying to install a 3rd party library, generated with browsify (https://github.com/bitpay/bitcore-wallet-client), works well with Angular 1 in production.

But now trying to install with webpack, and fail.

angular-cli: 1.0.0-beta.11-webpack.2
node: 4.4.7
os: darwin x64 (Mac OSX El Capitan)

I'm doing this in a component, for example:

import * as Client from 'bitcore-wallet-client';

...

ngOnInit() {
    var bwc = new Client({
      baseUrl: 'https://bws.bitpay.com/bws/api',
      verbose: true
    });
}

The problem is with request (https://github.com/request/request/issues/1529) library used.

The log:

ERROR in ./~/forever-agent/index.js
Module not found: Error: Can't resolve 'net' in '/node_modules/forever-agent'
 @ ./~/forever-agent/index.js 6:10-24
 @ ./~/request/request.js
 @ ./~/request/index.js
 @ ./~/bitcore-wallet-client/lib/api.js
 @ ./~/bitcore-wallet-client/lib/index.js
 @ ./~/bitcore-wallet-client/index.js
 @ ./src/app/wallet/import/import.component.ts
 @ ./src/app/app.module.ts
 @ ./src/app/index.ts
 @ ./src/main.ts
 @ multi main

ERROR in ./~/forever-agent/index.js
Module not found: Error: Can't resolve 'tls' in '/node_modules/forever-agent'
 @ ./~/forever-agent/index.js 7:10-24
 @ ./~/request/request.js
 @ ./~/request/index.js
 @ ./~/bitcore-wallet-client/lib/api.js
 @ ./~/bitcore-wallet-client/lib/index.js
 @ ./~/bitcore-wallet-client/index.js
 @ ./src/app/wallet/import/import.component.ts
 @ ./src/app/app.module.ts
 @ ./src/app/index.ts
 @ ./src/main.ts
 @ multi main

ERROR in ./~/tough-cookie/lib/cookie.js
Module not found: Error: Can't resolve 'net' in '/node_modules/tough-cookie/lib'
 @ ./~/tough-cookie/lib/cookie.js 32:10-24
 @ ./~/request/lib/cookies.js
 @ ./~/request/index.js
 @ ./~/bitcore-wallet-client/lib/api.js
 @ ./~/bitcore-wallet-client/lib/index.js
 @ ./~/bitcore-wallet-client/index.js
 @ ./src/app/wallet/import/import.component.ts
 @ ./src/app/app.module.ts
 @ ./src/app/index.ts
 @ ./src/main.ts
 @ multi main

ERROR in ./~/tunnel-agent/index.js
Module not found: Error: Can't resolve 'net' in '/node_modules/tunnel-agent'
 @ ./~/tunnel-agent/index.js 3:10-24
 @ ./~/request/lib/tunnel.js
 @ ./~/request/request.js
 @ ./~/request/index.js
 @ ./~/bitcore-wallet-client/lib/api.js
 @ ./~/bitcore-wallet-client/lib/index.js
 @ ./~/bitcore-wallet-client/index.js
 @ ./src/app/wallet/import/import.component.ts
 @ ./src/app/app.module.ts
 @ ./src/app/index.ts
 @ ./src/main.ts
 @ multi main

ERROR in ./~/tunnel-agent/index.js
Module not found: Error: Can't resolve 'tls' in '/node_modules/tunnel-agent'
 @ ./~/tunnel-agent/index.js 4:10-24
 @ ./~/request/lib/tunnel.js
 @ ./~/request/request.js
 @ ./~/request/index.js
 @ ./~/bitcore-wallet-client/lib/api.js
 @ ./~/bitcore-wallet-client/lib/index.js
 @ ./~/bitcore-wallet-client/index.js
 @ ./src/app/wallet/import/import.component.ts
 @ ./src/app/app.module.ts
 @ ./src/app/index.ts
 @ ./src/main.ts
 @ multi main

ERROR in [default] /src/app/wallet/import/import.component.ts:5:24 
Cannot find module 'bitcore-wallet-client'.

So, adding a webpack-config.js in https://github.com/bitpay/bitcore-wallet-client will solve the problem? Or we need to add this...

    net: 'empty',
    tls: 'empty'

in angular-cli webpack config file? Like we done here (https://github.com/angular/angular-cli/pull/1599) with fs ?

Thanks.

[filipesilva]

@TheLarkInn can you have a look?

[TheLarkInn]

I'm starting to get the feeling we will need to expose the node builtins. @hansl

[chiefmc]

Hey guys!

We're facing the same behavior, trying to use AutobahnJS:

ERROR in ./~/ws/lib/WebSocketServer.js
Module not found: Error: Can't resolve 'tls' in '/Users/chief_mc/Dev/Web Projects/v-ticket-admin-ui/node_modules/ws/lib'
 @ ./~/ws/lib/WebSocketServer.js 15:10-24
 @ ./~/ws/index.js
 @ ./~/autobahn/lib/transport/websocket.js
 @ ./~/autobahn/lib/configure.js
 @ ./~/autobahn/lib/autobahn.js
 @ ./~/autobahn/index.js
 @ ./src/app/app.component.ts
 @ ./src/app/index.ts
 @ ./src/main.ts
 @ multi main

Could you give a hint on how that can be sorted?

[chiefmc]

update: the only way I've manage to sort it is to directly edit the Webpack common config file in node_modules which is a no-go way.
Is there a chance to give us a tool making it the proper way?

Thanks.

[TheLarkInn]

There is no 'proper' way at the moment, but this will be implemented one we have our add-on system implemented.

[chiefmc]

coolio, looking forward to put my hands on it

Many thanks!

[RicardoVaranda]

@TheLarkInn what would you recommend people to do until that is implemented then? Would you mind explaining the steps of installing a 3rd party app to make it clear for the rest of the people until we have a permanent fix for this?

I taught a major reason behind switching to webpack was that it would fix this issue?

[filipesilva]

@RicardoVaranda the readme has instructions on how to add 3rd party libs, this is IMHO a special case where the lib relies on node runtime built-ins.

[RicardoVaranda]

@FIlipesilva

You are right after looking at the updated readme one I learnt about app [0].scripts which is now used and solved all my issues!

[ecollis6]

@FIlipesilva @RicardoVaranda

Am I missing something? I followed the instructions in the readme.

  "apps": [
    {
      "main": "src/main.ts",
      "tsconfig": "src/tsconfig.json",
      "mobile": false,
      "scripts":  [
          "<path-to-file>"
      ]
    }
  ]

[RicardoVaranda]

@ecollis6 Looks good to me, are you having problems with that config?

[herkulano]

Same problem with both styles and scripts in v1.0.0-beta.11-webpack.8

"apps": [
    {
      "main": "src/main.ts",
      "tsconfig": "src/tsconfig.json",
      "mobile": false,
      "styles": [
        "src/styles.scss"
      ],
      "scripts": [
        "node_modules/hammerjs/hammer.min.js",
        "node_modules/d3/d3.min.js"
      ]
    }
  ],

Update: My bad! Had webpack.8 in global and webpack.2 in local, plus all the deprecated configs of webpack.2. Changed it and it's working!

[TheLarkInn]

Why minified version?

[herkulano]

@TheLarkInn habit. I know webpack will minify. Although it's not relevant if it's minified or not.

[chiefmc]

Any updates on this guys? With beta.15 I still need to manually add tls: 'empty' to node_modules for AutobahnJS to work properly...

[sfali23]

I am also getting similar error while using mongodb withing angular2 app, Is there any workaround?

[filipesilva]

@chiefmc I tried setting tls: 'empty' and afaik it did not solve the original issue.

I'm not familiar with bitcore-wallet-client but wonder if it works in pure browser app, for instance if it's loaded via a CDN url or something. If it has a dependency on tls and net those aren't available in the browser I think.

Maybe it solves your problem though, so I'll make a PR for it.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}