Angular 11.2.6, crypto-js 4.1.1 have "error An unhandled exception occurred: Script file ../node_modules/crypto-js/crypto-js.js does not exist."

Question

I have a project in angular version 11.2.6 and i installed crypto-js version 4.1.1. My goal was to encrypt the user password before sending it to the backend.

everything compile but when i try to start the server with npm start i got this error :

An unhandled exception occurred: Script file ../node_modules/crypto-js/crypto-js.js does not exist.

I searched how to solve the problem but I couldn't solve it, i tried :

• adding crypto: false after the dev dependencies on package.json :

"devDependencies": {
    ...
},
"browser": {
    "crypto": false
}

• adding the path on tsconfig.json

"compilerOptions": {
"baseUrl": "./",
"paths": {
  "crypto": [
    "node_modules/crypto-js"
  ]

• tried installing "npm install [email protected]"

I think I forgot some attempts, but the point is that I haven't found a solution

my package.json file :

> {   "name": "lijin-tools",   "version": "1.0.0",   "description":
> "Lijin-tools is created for Jin familly needs",   "repository":
> "https://github.com/creativetimofficial/notus-angular",   "license":
> "MIT",   "scripts": {
>     "ng": "ng",
>     "start": "ng serve",
>     "build": "ng build",
>     "test": "ng test",
>     "lint": "ng lint",
>     "e2e": "ng e2e",
>     "build:tailwind": "tailwind build src/assets/styles/index.css -o src/assets/styles/tailwind.css",
>     "install:clean": "rm -rf node_modules/ && rm -rf package-lock.json && npm install && npm run build:tailwind && npm start"   },  
> "dependencies": {
>     "@angular/animations": "11.2.6",
>     "@angular/common": "11.2.6",
>     "@angular/compiler": "11.2.6",
>     "@angular/core": "11.2.6",
>     "@angular/forms": "11.2.6",
>     "@angular/material": "11.2.6",
>     "@angular/platform-browser": "11.2.6",
>     "@angular/platform-browser-dynamic": "11.2.6",
>     "@angular/router": "11.2.6",
>     "@fortawesome/fontawesome-free": "5.15.3",
>     "@popperjs/core": "2.9.1",
>     "@tailwindcss/forms": "0.2.1",
>     "@types/crypto-js": "^4.1.1",
>     "chart.js": "2.9.4",
>     "crypto-js": "^4.1.1",
>     "rxjs": "6.6.6",
>     "tailwindcss": "2.0.4",
>     "tslib": "2.1.0",
>     "zone.js": "0.11.4"   },   "devDependencies": {
>     "@angular-devkit/build-angular": "0.1102.4",
>     "@angular/cli": "11.2.6",
>     "@angular/compiler-cli": "11.2.6",
>     "@angular/language-service": "11.2.6",
>     "@types/jasmine": "3.6.6",
>     "@types/jasminewd2": "2.0.8",
>     "@types/node": "14.14.35",
>     "codelyzer": "6.0.1",
>     "jasmine-core": "3.6.0",
>     "jasmine-spec-reporter": "6.0.0",
>     "karma": "6.2.0",
>     "karma-chrome-launcher": "3.1.0",
>     "karma-coverage-istanbul-reporter": "3.0.3",
>     "karma-jasmine": "4.0.1",
>     "karma-jasmine-html-reporter": "1.5.4",
>     "protractor": "7.0.0",
>     "ts-node": "9.1.1",
>     "tslint": "6.1.3",
>     "typescript": "4.1.5"   } }

tsconfig.json file :

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "module": "esnext",
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2015",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true
  }
}

and my crypto.service.ts file :

> import { Injectable } from '@angular/core'; import * as CryptoJS from
> 'crypto-js';
> 
> @Injectable({   providedIn: 'root' }) export class CryptoService {  
> constructor() { }   keys: string = '123456$#@$^@1ERF';
> 
>   //The set method is use for encrypt the value.   set(value){
>     var key = CryptoJS.enc.Utf8.parse(this.keys);
>     var iv = CryptoJS.enc.Utf8.parse(this.keys);
>     var encrypted = CryptoJS.AES.encrypt(CryptoJS.enc.Utf8.parse(value.toString()), key,
>     {
>         keySize: 128 / 8,
>         iv: iv,
>         mode: CryptoJS.mode.CBC,
>         padding: CryptoJS.pad.Pkcs7
>     });
> 
>     return encrypted.toString();   }
> 
>   //The get method is use for decrypt the value.   get(value){
>     var key = CryptoJS.enc.Utf8.parse(this.keys);
>     var iv = CryptoJS.enc.Utf8.parse(this.keys);
>     var decrypted = CryptoJS.AES.decrypt(value, key, {
>         keySize: 128 / 8,
>         iv: iv,
>         mode: CryptoJS.mode.CBC,
>         padding: CryptoJS.pad.Pkcs7
>     });
> 
>     return decrypted.toString(CryptoJS.enc.Utf8);   } }

if i have miss some post who can help me or if you need some more informations, i would be happy to close or give more informations !

Thanks in advance if someone can help me with that problem !