Angular中Azure CreateBlobService无法读取环境变量或传入值问题

Hey there, let's break down the two errors you're hitting and work through solutions for each:

1. ERROR Error: Credentials must be provided when creating a service client #

This error pops up because the createBlobService function isn't getting valid authentication details from your environment setup. Here's how to fix it:

• Double-check your environment variable setup: Make sure the connection string (or account name/key) in environment.ts is exactly what you copied from the Azure Portal's storage account settings. Typos or missing characters are a common culprit here.
• Explicitly pass credentials to createBlobService: Don't rely on implicit environment variable detection (it's not always reliable in all setups). Instead, read the variable and pass it directly:

  var azure = require('azure-storage');
  // Pull the connection string from your environment
  const storageConnectionString = process.env.AZURE_STORAGE_CONNECTION_STRING;
  
  // Add a check to catch missing variables early
  if (!storageConnectionString) {
    throw new Error("AZURE_STORAGE_CONNECTION_STRING is not defined in your environment");
  }
  
  // Initialize the blob service with the connection string
  var bs = azure.createBlobService(storageConnectionString);
  

  Alternatively, if you prefer using account name and key instead of a connection string:

  var bs = azure.createBlobService('your-storage-account-name', 'your-storage-account-key');
  

2. ERROR TypeError: crypto.createHmac is not a function #

This is a critical one—here's the root cause: the azure-storage library you're using is built for Node.js environments, and it depends on Node's built-in crypto module. If you're running this code in a browser (like an Angular app, where environment.ts is part of the frontend code), the browser doesn't have access to Node's crypto module, hence the error.

Here's how to resolve this:

• Switch to the browser-compatible Azure SDK: Microsoft's modern @azure/storage-blob package is designed to work in both Node.js and browser environments. It's the recommended replacement for the old azure-storage library.
  1. First, install the new package:

     npm install @azure/storage-blob
     

  2. Update your code to use the new SDK (example in TypeScript, since you're using environment.ts):

     import { BlobServiceClient } from '@azure/storage-blob';
     import { environment } from './environment';
     
     // Initialize the Blob Service Client from your connection string
     const blobServiceClient = BlobServiceClient.fromConnectionString(environment.azureStorageConnectionString);
     
     // Example: Get a container client to interact with blobs
     const containerClient = blobServiceClient.getContainerClient('your-container-name');
     

• If you must use the old library: You'll need to move this code to a Node.js backend (like an Express server) instead of running it in the frontend. The browser simply can't support the Node-specific dependencies the old library relies on.

内容的提问来源于stack exchange，提问作者Rob