crypto.createHmac is not a function + angular

Question

I'm trying to get the crypto library working in order to use the specific method createHmac The goal is to use it in order to upload images to azure storage blob. related post I made , but I keep getting crypto.createHmac is not a function There's a related post to my issue How to use 'crypto' module in Angular2? , but I've tried every answer in that post and I'm still having issues. I'm not sure how to get past this. I appreciate any help!

import { BlobServiceClient, AnonymousCredential, newPipeline } from '@azure/storage-blob';



  async addImagesToBlob() {


    let currentFile = this.file[0];

    const accountName = environment.accountName;
    const key = environment.key;
    const start = new Date(new Date().getTime() - (15 * 60 * 1000));
    const end = new Date(new Date().getTime() + (30 * 60 * 1000));
    const signedpermissions = 'rwdlac';
    const signedservice = 'b';
    const signedresourcetype = 'sco';
    const signedexpiry = end.toISOString().substring(0, end.toISOString().lastIndexOf('.')) + 'Z';
    const signedProtocol = 'https';
    const signedversion = '2018-03-28';

    const StringToSign =
      accountName + '\n' +
      signedpermissions + '\n' +
      signedservice + '\n' +
      signedresourcetype + '\n' +
      '\n' +
      signedexpiry + '\n' +
      '\n' +
      signedProtocol + '\n' +
      signedversion + '\n';
    const crypto = require('crypto');


    let sig = crypto.createHmac('sha256', Buffer.from(key, 'base64')).update(StringToSign, 'utf8').digest('base64');


    const sasToken = `sv=${(signedversion)}&ss=${(signedservice)}&srt=${(signedresourcetype)}&sp=${(signedpermissions)}&se=${encodeURIComponent(signedexpiry)}&spr=${(signedProtocol)}&sig=${encodeURIComponent(sig)}`;
    const containerName = environment.containerName;

    const pipeline = newPipeline(new AnonymousCredential(), {
      retryOptions: { maxTries: 4 }, // Retry options
      userAgentOptions: { userAgentPrefix: "AdvancedSample V1.0.0" }, // Customized telemetry string
      keepAliveOptions: {
        // Keep alive is enabled by default, disable keep alive by setting false
        enable: false
      }
    });
    const blobServiceClient = new BlobServiceClient(`https://${accountName}.blob.core.windows.net?${sasToken}`,
      pipeline)
    const containerClient = blobServiceClient.getContainerClient(containerName)
    if (!containerClient.exists()) {
      console.log("the container does not exit")
      await containerClient.create()

    }
    const client = containerClient.getBlockBlobClient(currentFile.name)
    const response = await client.uploadBrowserData(currentFile, {
      blockSize: 4 * 1024 * 1024, // 4MB block size
      concurrency: 20, // 20 concurrency
      onProgress: (ev) => console.log(ev),
      blobHTTPHeaders: { blobContentType: currentFile.type }
    })
    console.log(response._response.status);
  }

Answer 1

Following Steps resolved my issue:

1. npm install crypto-js --save
2. npm install @types/node --save
3. import { Crypto } from 'crypto-js'
4. Crypto.createHmac() -> Notice 'Crypto' and not 'crypto' when calling createHmac().