Angular & native crypto module

[qortex]

I understand the move to 4.0.0 uses native crypto module.

As a result, with my Angular app, I get the error message below when building.

As I understand, the crypto module needs to be explicitly bundled by Webpack as it's not by default with Angular config.

Does anyone already know how to do that? I'm not that familiar with Webpack and would appreciate any hint.

WARNING in ./node_modules/crypto-js/core.js
Module not found: Error: Can't resolve 'crypto' in '/tmp/build_fa83cfc445ddeaf2cca1c12ae9bcefc8/node_modules/crypto-js'
resolve 'crypto' in '/tmp/build_fa83cfc445ddeaf2cca1c12ae9bcefc8/node_modules/crypto-js'
  Parsed request is a module
  using description file: /tmp/build_fa83cfc445ddeaf2cca1c12ae9bcefc8/node_modules/crypto-js/package.json (relative path: .)
    Field 'browser' doesn't contain a valid alias configuration
    resolve as module
      looking for modules in /tmp/build_fa83cfc445ddeaf2cca1c12ae9bcefc8
        using description file: /tmp/build_fa83cfc445ddeaf2cca1c12ae9bcefc8/package.json (relative path: .)
          Field 'browser' doesn't contain a valid alias configuration
          using description file: /tmp/build_fa83cfc445ddeaf2cca1c12ae9bcefc8/package.json (relative path: ./crypto)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              /tmp/build_fa83cfc445ddeaf2cca1c12ae9bcefc8/crypto doesn't exist
            .ts
              Field 'browser' doesn't contain a valid alias configuration
              /tmp/build_fa83cfc445ddeaf2cca1c12ae9bcefc8/crypto.ts doesn't exist
            .tsx
              Field 'browser' doesn't contain a valid alias configuration
              /tmp/build_fa83cfc445ddeaf2cca1c12ae9bcefc8/crypto.tsx doesn't exist
            .mjs
              Field 'browser' doesn't contain a valid alias configuration
              /tmp/build_fa83cfc445ddeaf2cca1c12ae9bcefc8/crypto.mjs doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              /tmp/build_fa83cfc445ddeaf2cca1c12ae9bcefc8/crypto.js doesn't exist
            as directory
              /tmp/build_fa83cfc445ddeaf2cca1c12ae9bcefc8/crypto doesn't exist
      /tmp/build_fa83cfc445ddeaf2cca1c12ae9bcefc8/node_modules/crypto-js/node_modules doesn't exist or is not a directory
      /tmp/build_fa83cfc445ddeaf2cca1c12ae9bcefc8/node_modules/node_modules doesn't exist or is not a directory
      /tmp/node_modules doesn't exist or is not a directory
      /node_modules doesn't exist or is not a directory
      looking for modules in /tmp/build_fa83cfc445ddeaf2cca1c12ae9bcefc8/node_modules
        using description file: /tmp/build_fa83cfc445ddeaf2cca1c12ae9bcefc8/package.json (relative path: ./node_modules)
          Field 'browser' doesn't contain a valid alias configuration
          using description file: /tmp/build_fa83cfc445ddeaf2cca1c12ae9bcefc8/package.json (relative path: ./node_modules/crypto)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              /tmp/build_fa83cfc445ddeaf2cca1c12ae9bcefc8/node_modules/crypto doesn't exist
            .ts
              Field 'browser' doesn't contain a valid alias configuration
              /tmp/build_fa83cfc445ddeaf2cca1c12ae9bcefc8/node_modules/crypto.ts doesn't exist
            .tsx
              Field 'browser' doesn't contain a valid alias configuration
              /tmp/build_fa83cfc445ddeaf2cca1c12ae9bcefc8/node_modules/crypto.tsx doesn't exist
            .mjs
              Field 'browser' doesn't contain a valid alias configuration
              /tmp/build_fa83cfc445ddeaf2cca1c12ae9bcefc8/node_modules/crypto.mjs doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              /tmp/build_fa83cfc445ddeaf2cca1c12ae9bcefc8/node_modules/crypto.js doesn't exist
            as directory
              /tmp/build_fa83cfc445ddeaf2cca1c12ae9bcefc8/node_modules/crypto doesn't exist

[evanvosberg]

This is not a webpack issue only, seems other bundler do have the same problem.

Here is the try to solve the React Native issue, which also has problems with creating a bundle. #259

Need to find a solution to get optional require() working with bundlers such as webpack.

[qortex]

Interesting.

Would this comment help by any chance?

If the browserify trick makes sense, I can try it and let you know how it goes.

[qortex]

(Cross-posted to StackOverflow for reach)

[evanvosberg]

Actually this one looks promising angular/angular-cli#1548 (comment)

[merrywhether]

If you were to change

if (!crypto && typeof require === 'function') {

to

if (typeof window === 'undefined' && !crypto && typeof require === 'function') {

you would intersect with some webpack magic (unsure about other bundlers) and dead-code elimination would wipe out the entire if block and never execute the require, keeping it out of browser bundles (and similar to the inverse checks you are already doing).

I'm not sure how this would work out for React-Native users; maybe they'd have to fall back to something like manually providing the crypto global?

global.crypto = require('react-native-crypto');

And then you could provide another DCE bailout like || process.env.CRYPTO_ENV === 'non_node', where people could then WebpackDefine / @babel/transform-define / etc the value process.env.CRYPTO_ENV to non-node?

Just spitballing with regard to the RN, but leaning into DCE is the best way to help browsers bundlers (really, anything using uglify or terser).

[ah584d]

I was able to fix this issue by running a postinstall script which fix the file ./node_modules/crypto-js/core.js.
After the script running it worsk well with angular 8.2.14 and running the command ng build.
If you are interested i can publish my post-install here

[qortex]

Sure, what does it look like?

[gfaganli]

the same problem, any solution?

[merrywhether]

You can use https://github.com/ds300/patch-package to remove the entire if-block containing the require('crypto')statement. This would be more resilient than writing your own post-install script.

[ah584d]

hi @merrywhether , yes this is what i did , but without using patch-package.
it took me a bit time but it fix 100% the lib.

https://github.com/ah584d/azure-sas-token/blob/master/angular/scripts/fixBugCryptoJsInAngular8.js

[marshall86]

same problem with Angular 9+, please fix this issue

[jolugama]

same problem with Angular9+. SOLUTION:
https://www.npmjs.com/package/crypto-js/v/3.3.0

downgrade to 3.3.0. it is working.

[paulobontempo]

same problem with Angular9+. SOLUTION:
https://www.npmjs.com/package/crypto-js/v/3.3.0

downgrade to 3.3.0. it is working.

works for me as well.

[kuroidoruido]

Same issue for an Angular 9 project too. Downgrade works. Can you fix this issue to make it works properly? Maybe can we help you?

[mackelito]

I downgraded to 3.3.0 and I'm still getting these errors :(

import { sha256 } from 'crypto-js/sha256';
import { hex } from 'crypto-js/enc-hex';

and still seeing these warnings..

Warning: /manager.service.ts depends on 'crypto-js/sha256'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Warning: /manager.service.ts depends on 'crypto-js/enc-hex'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

[marshall86]

I downgraded to 3.3.0 and I'm still getting these errors :(

import { sha256 } from 'crypto-js/sha256';
import { hex } from 'crypto-js/enc-hex';

and still seeing these warnings..

Warning: /manager.service.ts depends on 'crypto-js/sha256'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Warning: /manager.service.ts depends on 'crypto-js/enc-hex'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

I had to do the same. I fixed that warnings with this:

"allowedCommonJsDependencies": ["crypto-js"]

inside the angular.json in the architect/build/options

[mackelito]

@marshall86 but that is just suppressing the warning right?.. and the bailout might still occur!?

[marshall86]

@marshall86 but that is just suppressing the warning right?.. and the bailout might still occur!?

Not quite sure, didn't have any issue though, luckily :)