How to import buffer library in a frontend ionic angular project for node-rsa to work

Issue

I need to use node-rsa to encrypt a wifi-password in ionic 5 with angular.

I have a running example on Stackblitz. However when i replicate it locally in angular 10 as well as ionic 5, it doesn't work.

In the local Angular project I get missing nodejs import errors which I can avoid by using the solution proposed here

ERROR in ./node_modules/node-rsa/src/schemes/pkcs1.js
Module not found: Error: Can't resolve 'constants' in '/Users/hanche/Documents/Development/playground/angular-node-rsa/node_modules/node-rsa/src/schemes'

ERROR in ./node_modules/node-rsa/src/NodeRSA.js
Module not found: Error: Can't resolve 'crypto' in '/Users/hanche/Documents/Development/playground/angular-node-rsa/node_modules/node-rsa/src'

Afterwards I get

Uncaught ReferenceError: Buffer is not defined
    at Object.ovSY (pkcs1.js:9)
    at __webpack_require__ (bootstrap:79)
    at Object.mumJ (schemes.js:2)
    at __webpack_require__ (bootstrap:79)
    at Object.T+ye (rsa.js:46)
    at __webpack_require__ (bootstrap:79)
    at Object.WShU (NodeRSA.js:9)
    at __webpack_require__ (bootstrap:79)
    at Module.Sy1n (app.component.ts:1)
    at __webpack_require__ (bootstrap:79)

This is the same error I'm getting in my production app. I don't get why it is running on stackblitz but not in a local development environment.

My package.json is

{
  "name": "angular-node-rsa",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "browser": {
    "crypto": false,
    "constants": false,
    "fs": false,
    "path": false
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~10.1.6",
    "@angular/common": "~10.1.6",
    "@angular/compiler": "~10.1.6",
    "@angular/core": "~10.1.6",
    "@angular/forms": "~10.1.6",
    "@angular/platform-browser": "~10.1.6",
    "@angular/platform-browser-dynamic": "~10.1.6",
    "@angular/router": "~10.1.6",
    "buffer": "^6.0.2",
    "node-rsa": "^1.1.1",
    "rxjs": "~6.6.0",
    "tslib": "^2.0.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1001.7",
    "@angular/cli": "~10.1.7",
    "@angular/compiler-cli": "~10.1.6",
    "@types/node": "^12.11.1",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.0.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~4.0.2"
  }
}

and my tsconfig.json is

/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2015",
    "module": "esnext",
    "lib": ["es2018", "dom","ESNext"],
    "typeRoots": ["node_modules/@types"]
  },
  "angularCompilerOptions": {
    "enableIvy": true,
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true
  }
}

import { Component } from '@angular/core';
import { Buffer } from 'buffer';
import NodeRSA from 'node-rsa';

const pubKey =
    '30819F300D06092A864886F70D010101050003818D0030818902818100B2E9AFAFEED76A5C31D069F84328D785DFE6C40A69F51B29C7D7C91EF171A5EF6AD9FC30AF31F4B59C0FE317E47B5DBAA04E3753AC7F8B0E54D8EB4372894900DE247FD11B8C2208FE1C837ADEC409B0F2EE89A5C54B8AB80D5934FC65100406077D129DC5EB961E883B937C4251FDA4BD77224D1CDEF09151894F902758AA3B0203010001000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'angular-node-rsa';
  encrypt() {
        const buff = Buffer.from(pubKey, 'hex');
        const rsa = new NodeRSA(buff.slice(22), 'pkcs1-public-der', {
            encryptionScheme: 'pkcs1',
        });
        console.log(rsa.encrypt('abc', 'hex'));
    }
}

Solution

Has been solved in https://stackoverflow.com/a/59249136/5342949

In package.json add

  "browser": {
    "crypto": false,
    "constants": false,
    "fs": false,
    "path": false
  },

In pollyfils.ts add

(window as any).global = window;
(window as any).global.Buffer = require('buffer').Buffer;
(window as any).process = {};

In app.tsconfig.json add

"types": ["node"]

Answered By - Han Che