Can't resolve 'crypto' in './node_modules/sjcl' while using SJCL in Angular 7

Question

I want to encrypt data at clients side, so I found SJCL npm.

Gone through their documentation. However, less documentation provided by SJCL contributors, can't implement that in Angular

I have tried the following.

I installed the package

1. npm install --save sjcl

   after that I tried installing type definitions also

2. npm install --save sjcl @types/sjcl

here is my package.json

{

"name": "project-name",

"version": "0.0.0",


  "scripts": {

    "ng": "ng",

    "start": "ng serve",

    "build": "ng build",

    "test": "ng test",

    "lint": "ng lint",

    "e2e": "ng e2e"

  },

  "private": true,

  "dependencies": {

    "@angular/animations": "~7.1.0",

    "@angular/cdk": "~7.1.0",

    "@angular/common": "~7.1.0",

    "@angular/compiler": "~7.1.0",

    "@angular/core": "~7.1.0",

    "@angular/forms": "~7.1.0",

    "@angular/platform-browser": "~7.1.0",

    "@angular/platform-browser-dynamic": "~7.1.0",

    "@angular/router": "~7.1.0",

    "@types/axios": "^0.14.0",

    "@types/sjcl": "^1.0.28",

    "angular-filepond": "^1.0.5",

    "core-js": "^2.5.4",

    "rxjs": "~6.3.3",

    "sjcl": "^1.0.8",

    "tslib": "^1.9.0",

    "zone.js": "~0.8.26"

  },

  "devDependencies": {

    "@angular-devkit/build-angular": "~0.11.0",

    "@angular/cli": "~7.1.2",

    "@angular/compiler-cli": "~7.1.0",

    "@angular/language-service": "~7.1.0",

    "@schematics/angular": "~7.1.0",

    "@types/echarts": "^4.1.3",

    "@types/jasmine": "~2.8.8",

    "@types/jasminewd2": "~2.0.3",

    "@types/node": "^8.9.5",

    "codelyzer": "~4.5.0",

    "jasmine-core": "~2.99.1",

    "jasmine-spec-reporter": "~4.2.1",

    "karma": "~3.1.1",

    "karma-chrome-launcher": "~2.2.0",

    "karma-coverage-istanbul-reporter": "~2.0.1",

    "karma-jasmine": "~1.1.2",

    "karma-jasmine-html-reporter": "^0.2.2",

    "protractor": "~5.4.0",

    "ts-node": "~7.0.0",

    "tslint": "~5.11.0",

    "typescript": "~3.1.6"

  }
}

Also I have done this

import * as sjcl from 'sjcl';

in one of my component.

Moreover, I have gone through this link Using SJCL library in Angular2

When I run angular app, I am getting

** WARNING in ./node_modules/sjcl/sjcl.js
Module not found: Error: Can't resolve 'crypto' in './node_modules/sjcl'**


**Note starts:**

used sjcl.encrypt("password", "data")
but after console.log(sjcl.encrypt("password", "data"))
it shows undefined

**Note ends:**

May be my note is not that perfect or I defined it wrong. How to use SJCL to encrypt data without this warning?

Answer 1

I had the same problem, after some research I found that it was node related warning. With Angular you need to modify the file:

node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/browser.js

at the end of the file I changed

node: false,

into

node: {crypto: true, stream: true},

Answer 2

I have used sjcl library for my react application. But the process remains the same.

import sjcl from 'sjcl';

Now you can use sjcl.encrypt() function. If you are looking for some example of AES encryption you can see my detailed answer https://stackoverflow.com/a/60504619/6453913

You can also use the tradional commonJs require method too.