Error using jsonwebtoken with angular-cli application

Question

I have an angular2 application that uses the angular-cli for the scaffold and other tasks, but now I can't use jsonwebtoken on my angular2 application.

I have added the dependency

yarn add --save jsonwebtoken

and I actually can see the library at node_modules, I do the

import { jwt } from 'jsonwebtoken'

in my TypeScript code and the IDE gives me no warning about it, so it can find the dependency correctly.

But when I do npm start or yarn start I have the following error message

ERROR in ./~/isemail/lib/index.js
Module not found: Error: Can't resolve 'dns' in '/home/$MY_USER_NAME_PLACE_HOLDER/dir/to/my/app/node_modules/isemail/lib'
 @ ./~/isemail/lib/index.js 5:12-26
 @ ./~/joi/lib/string.js
 @ ./~/joi/lib/index.js
 @ ./~/jsonwebtoken/sign.js
 @ ./~/jsonwebtoken/index.js
 @ ./src/app/_auth/authentication.service.ts
 @ ./src/app/app.component.ts
 @ ./src/app/index.ts
 @ ./src/main.ts
 @ multi main

ERROR in [default] /home/$MY_USER_NAME_PLACE_HOLDER/dir/to/my/appsrc/app/_auth/authentication.service.ts:41:24 
Property 'validate' does not exist on type 'typeof "/home/$MY_USER_NAME_PLACE_HOLDER/dir/to/my/app/node_modules/@types/jsonwebtoken/index"'.

I follow a serie of conversations and related projects when I searched for the error on internet. And I found that:

• There is a similar problem but no so detailed and it has not answer.

• Some related errors in react-validation-mixin, isemail and joi lead me to this one, when they describe similar problems doing import of libraries that depends on dns, net or some other native modules from node and makes me think that there is some problems when using this kind of libraries exclusively with webpack (I have no the expertise to be sure of that, please correct if I am wrong) and the workaround is to add the following lines to the webpack.config

  node: {
    net: 'empty',
    tls: 'empty',
    dns: 'empty'
  }
  

But my problem here is, with angular-cli there is no way to override webpack config and there is no intention to change that.

So I don't know what to do here, have you any idea of how can I use jsonwebtoken with my angular-cli application ?

Answer 1

I ran into the same problem when attempting to use jsonwebtoken client-side (jsonwebtoken works just fine server-side in my Express app).

The short answer is that it may not be possible to use https://github.com/Hendrixer/jwt-decode jsonwebtoke in your angular app. The library is a bit heavy if all you're wanting to do is decode JWT's client-side for doing things like validation, and the module is really intended for server-side use in node.js.

However, there are a number of alternatives available that DO work client side in angular 2 (including in angular-cli, webpack). Jwt-decode will decode JWTs, for example.

However, I found that the best alternative was to refactor my code to use Angular2-JWT's AuthHttp class which takes care of passing the token in the http header for you. It will also throw an error if the token doesn't exist or doesn't pass validation, which you can handle as you like.