# Angular build breaks for browser when trying to use the dgraph http client due to reliance on jsonwebtokens that in turn require Buffer in browser

**URL:** <https://discuss.dgraph.io/t/angular-build-breaks-for-browser-when-trying-to-use-the-dgraph-http-client-due-to-reliance-on-jsonwebtokens-that-in-turn-require-buffer-in-browser/12761>\
**Category:** Dgraph\
**Created:** [February 13, 2021, 6:01am UTC](https://discuss.dgraph.io/t/angular-build-breaks-for-browser-when-trying-to-use-the-dgraph-http-client-due-to-reliance-on-jsonwebtokens-that-in-turn-require-buffer-in-browser/12761 "2021-02-13T06:01:44Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![moinqidw](https://avatars.discourse-cdn.com/v4/letter/m/958977/32.png) [@moinqidw](https://discuss.dgraph.io/u/moinqidw)\
**Post date:** [February 13, 2021, 6:01am UTC](https://discuss.dgraph.io/t/angular-build-breaks-for-browser-when-trying-to-use-the-dgraph-http-client-due-to-reliance-on-jsonwebtokens-that-in-turn-require-buffer-in-browser/12761/1 "2021-02-13T06:01:44Z")

</div>

## I Want to Do

I would like to use the dgraph-js-http within my angular application to communicate with a self-hosted Dgraph cluster. Also I would like to use this client with dql and not just graphql as I need ability to do groupby and facets.

## What I Did

I have a standalone Dgraph instance running locally and also a angular application setup. Unfortunately the dgraph-js-http client has a dependency on jsonwebtokens which in turn depends upon a few libraries like crypto, stream, buffer etc that are not available in a browser context. Angular from version 6 has stopped allowing the use of such libraries within its context, please see below:

> <https://github.com/angular/angular-cli/issues/1548>
>
> 1. OS?  
> Mac OSX El Capitan
> 2. Versions. 
> angular-cli: local (v1.0.0-beta.…10, branch: webpack)  
> node: 4.4.7  
> os: darwin x64  
> 3. Repro steps.
> I've pulled down the Angular-cli project and am building it locally, so I am using the new webpack version. 
> The project that I am building uses Crypto libraries (via a dependency of a dependency ...).
> When I was running \`ng build\` I was seeing the dependency built like this:
> 
> \`\`\`
> /\* WEBPACK VAR INJECTION \*/(function(Buffer) {'use strict';
> 
> var crypto = \_\_webpack\_require\_\_(147);
> var BufferUtil = \_\_webpack\_require\_\_(21);
> var $ = \_\_webpack\_require\_\_(15);
> 
> var Hash = module.exports;
> 
> Hash.sha1 = function(buf) {
> $.checkArgument(BufferUtil.isBuffer(buf));
> return crypto.createHash('sha1').update(buf).digest();
> };
> ...
> \`\`\`
> 
> And then when I looked at module 147 (I.E. the crypto module) I was seeing nothing there:
> 
> \`\`\`
> /\*\*\*/ },
> /\* 147 \*/
> /\*\*\*/ function(module, exports, \_\_webpack\_require\_\_) {
> 
> /\*\*\*/ },
> \`\`\`
> 
> After a while of searching I took a look in the Angular-CLI code and saw that part of the webpack config (addon/ng2/models/webpack-build-common.ts) was this:
> 
> \`\`\`
> node: {
> global: 'window',
> crypto: 'empty',
> module: false,
> clearImmediate: false,
> setImmediate: false
> }
> \`\`\`
> 
> When I remove \`crypto: 'empty'\` everything builds correctly with the crypto module getting pulled in.
> 
> So my question is, why have you specified that crypto should be empty? 
> Is there any way to fix this more permanently?

> <https://stackoverflow.com/questions/50371593/angular-6-uncaught-referenceerror-buffer-is-not-defined>

I modified my tsconfig and polyfills for global/buffer but kept on getting the issue with other libraries that are node specific being depended upon by dgraph-js-http (jsonwebtokens). The Dgraph documentation clearly states this client supports browser environments but it relies heavily on libraries that are specific to node environments.

Is there any workaround for this or any fix planned?

## Dgraph Metadata

> **dgraph version**
>
> version: 20.11.0

---

<div class="post-metadata">

**Author:** ![MichelDiz](https://yyz1.discourse-cdn.com/flex007/user_avatar/discuss.dgraph.io/micheldiz/32/11873_2.png) [@MichelDiz](https://discuss.dgraph.io/u/MichelDiz)\
**Post date:** [February 13, 2021, 5:02pm UTC](https://discuss.dgraph.io/t/angular-build-breaks-for-browser-when-trying-to-use-the-dgraph-http-client-due-to-reliance-on-jsonwebtokens-that-in-turn-require-buffer-in-browser/12761/2 "2021-02-13T17:02:20Z")

</div>

> [@moinqidw](#):
>
> Is there any workaround for this or any fix planned?

Nope, and I think it wouldn’t be fixed cuz it isn’t a dgraph-js-http issue. It is a third party decision. The jsonwebtoken is necessary for Slash. We would need to drop Slash support to make it work for Angula. As far I can see.

BTW, none of our clients are meant to be running on client level (browser for example). You should create an API. That’s why the client works better in the NodeJS context.

> [@moinqidw](#):
>
> Also I would like to use this client with dql and not just graphql as I need ability to do groupby and facets.

You can use custom DQL or Lambda with DQL. And that procedure you need to do, will be available in GraphQL.

---

<div class="post-metadata">

**Author:** ![moinqidw](https://avatars.discourse-cdn.com/v4/letter/m/958977/32.png) [@moinqidw](https://discuss.dgraph.io/u/moinqidw)\
**Post date:** [February 13, 2021, 5:25pm UTC](https://discuss.dgraph.io/t/angular-build-breaks-for-browser-when-trying-to-use-the-dgraph-http-client-due-to-reliance-on-jsonwebtokens-that-in-turn-require-buffer-in-browser/12761/3 "2021-02-13T17:25:00Z")

</div>

Hi Michel,

Thanks for the response.

Yes personally I do not entirely agree with the reasoning of the angular team for dropping support for browser ports of node specific libraries though I understand their point with regards to client frameworks like Angular only supporting browser specific libraries. I imagine this will create a lot of issues for the Angular community as it can be turned into a he said/she said situation between Angular and other libraries dependent on node specific modules.

In turn I did give up and just moved onto setting up a express API and that seems to be working fine. I was simply being too hasty in wanting to try things out locally. So for anyone else that comes across this issue while trying to get Angular to work with the client, best to just setup a small API and use the various client libraries available from Dgraph in your backend.

---

<div class="post-metadata">

**Author:** ![Julius\_P](https://yyz1.discourse-cdn.com/flex007/user_avatar/discuss.dgraph.io/julius_p/32/6320_2.png) [@Julius\_P](https://discuss.dgraph.io/u/Julius_P)\
**Post date:** [February 21, 2021, 6:50pm UTC](https://discuss.dgraph.io/t/angular-build-breaks-for-browser-when-trying-to-use-the-dgraph-http-client-due-to-reliance-on-jsonwebtokens-that-in-turn-require-buffer-in-browser/12761/4 "2021-02-21T18:50:36Z")

</div>

Hi!

I stumbled upon the same problem. But this can be conveniently be monkey patched.

[Making web3/bitcore-lib work with Angular 6-11 and \>=11 (github.com)](https://gist.github.com/niespodd/1fa82da6f8c901d1c33d2fcbb762947d)

Just tried it with a fresh Angular 11 app and could retrieve the Data from Dgraph backend no problem. Before the monkey patch the error you named gave me trouble as well.
