Angular application fails to polyfill WebCrypto for libraries that depend on it

[TernaryFortress]

Command

build

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

I'm attempting to use the https://github.com/paulmillr/noble-curves library in my angular project, however whenever I pass my new service into a constructor, I get hit with this error:

✨ Compiled Worker successfully
✨ Uploading Worker bundle
✨ Uploading _routes.json
🌎 Deploying...

✘ [ERROR] Deployment failed!

  Failed to publish your Function. Got error: Uncaught Error: No such module
  "crypto".
    imported from "chunk-TUV5YX6S.mjs"

It's worth mentioning that I'm using cloudflare's quick-start:

npm create cloudflare@latest -- my-angular-app --framework=angular

which has some wrangler built-ins

---

The problem here, is that noble relies on the WebCrypto getRandomNumbers method, which isn't being exposed. We also should ideally not be using a polyfill, due to the added security vulnerabilities, however those are the only solutions I'm finding online.

---

HOWEVER, even without that assumption, attempting to add either "crypto-browserify" or "crypto-js" to paths in ts.config also fails, and trying to expose crypto as a dependency via "allowedCommonJsDependencies": ["crypto"]" in angular.json fails to get results too.

Minimal Reproduction

https://github.com/TernaryFortress/angular_debug

You can just download my version and npm run serve or deploy it, if you want.

Exception or Error

Failed to publish your Function. Got error: Uncaught Error: No such module
"crypto".
imported from "chunk-TUV5YX6S.mjs"

Your Environment

Angular CLI: 18.2.7
Node: 20.18.0
Package Manager: npm 10.8.2
OS: linux x64

Angular:
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, platform-server
... router

Package Version

@angular-devkit/architect 0.1802.7 (cli-only)
@angular-devkit/build-angular
@angular-devkit/core 18.2.7 (cli-only)
@angular-devkit/schematics 18.2.7 (cli-only)
@angular/cli 18.2.7 (cli-only)
@schematics/angular 18.2.7 (cli-only)
rxjs 7.8.1 (cli-only)
typescript
zone.js

Anything else relevant?

We should be trying to explicitly expose the browser's crypto module if possible, as using a polyfill is going to result in vulnerabilities that don't otherwise need to be there.

[alan-agius4]

This is expected because, for the server build, we do not automatically apply polyfilling, nor there is currently an option to add a custom polyfills.

[TernaryFortress]

This is expected because, for the server build, we do not automatically apply polyfilling, nor there is currently an option to add a custom polyfills.

Forgive me, but I don't believe this is a polyfill issue - I only mentioned those as part of troubleshooting. The browser has the needed WebCrypto functionality, and it works.

The problem is that the installed library depends on it, but does not see it. The goal should not be to polyfill the crypto functions, but rather to expose the existing crypto functions to the added library.

[alan-agius4]

In your case, however, the error is not coming from the browser but from the server (Cloudflare workers). The issue arises because when bundling or the server the the Node.js variant is used, which is not available in this environment.

Possible this is fixed in version 19 which is currently in pre-release by using experimentalPlatform. See: #28598

[TernaryFortress]

Oh, it's an SSR issue then! That makes perfect sense.

import { Injectable } from '@angular/core'
import { Inject, PLATFORM_ID } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';

@Injectable({
  providedIn: 'root'
})

export class CryptographyService {
  public p384: any

  constructor(@Inject(PLATFORM_ID) private platformId: Object) {
    if (isPlatformBrowser(this.platformId)) {
      import('@noble/curves/p384').then(module => {
        this.p384 = module.p384 }) }
  }

  /** Given a private key, extracts the public key from it. */
  async generateEccPublicKey(privateKey: Uint8Array): Promise<Uint8Array> {
    return this.p384.getPublicKey(privateKey)
  }

}

This compiles, and I'm hopeful it's a permanent fix, just be aware that any pages which construct this service probably need to be excluded from SSR via the "_routes.json" file as well.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}