Angular项目用AWS-SDK传图到S3 Bucket遇多问题求助

问题背景 #

在新项目中尝试实现AWS S3直传方案时，遇到以下系列问题：

1. 依赖安装冲突 #

执行npm install aws-sdk时触发依赖冲突，原因是@agm/core@1.1.0要求的@angular/common版本与当前项目的@angular/common@15.2.2不兼容，最终通过--legacy-peer-deps参数完成AWS SDK安装。

2. 服务编写与运行报错 #

编写UploadService服务并在懒加载模块的DashboardComponent中调用后，运行时出现两类错误：

• 控制台提示this.uploadService has no function uploadImage()
• 导航到组件时页面空白，抛出两个核心错误：

  ERROR Error: Uncaught (in promise): ReferenceError: global is not defined
  ReferenceError: global is not defined
      at 90496 (index.js:43:30)
      ...（错误栈省略）
  
  ERROR Error: Uncaught (in promise): ReferenceError: Cannot access 'ProfilesModule' before initialization
  ReferenceError: Cannot access 'ProfilesModule' before initialization
      at Module.ProfilesModule (dashboard.component.html:103:55)
      ...（错误栈省略）
  

仅在组件中引入该服务时才会触发上述问题。

问题解决办法 #

1. 替换为 AWS SDK for JavaScript v3（推荐方案） #

AWS SDK v2 对Angular 15+兼容性较差，建议升级到AWS SDK for JavaScript v3——它采用模块化设计，体积更小且适配现代前端框架：

• 安装所需模块：

  npm install @aws-sdk/client-s3 @aws-sdk/lib-storage
  

• 重构UploadService示例：

  import { Injectable } from '@angular/core';
  import { S3Client, PutObjectCommand } from '@aws-sdk/client-s3';
  
  @Injectable({ providedIn: 'root' })
  export class UploadService {
    private s3Client: S3Client;
  
    constructor() {
      this.s3Client = new S3Client({
        credentials: {
          accessKeyId: '', // 禁止硬编码，建议通过环境变量注入
          secretAccessKey: ''
        },
        region: 'me-south-1'
      });
    }
  
    async uploadImage(file: File): Promise<boolean> {
      try {
        const params = {
          Bucket: 'images',
          Key: `images/${file.name}`,
          Body: file,
          ACL: 'public-read',
          ContentType: file.type
        };
        await this.s3Client.send(new PutObjectCommand(params));
        console.log('文件上传成功');
        return true;
      } catch (err) {
        console.error('上传失败:', err);
        return false;
      }
    }
  
    async uploadDoc(file: File): Promise<boolean> {
      try {
        const params = {
          Bucket: 'images',
          Key: `documents/${file.name}`,
          Body: file,
          ACL: 'public-read',
          ContentType: file.type
        };
        await this.s3Client.send(new PutObjectCommand(params));
        console.log('文件上传成功');
        return true;
      } catch (err) {
        console.error('上传失败:', err);
        return false;
      }
    }
  }
  

2. 修复SDK v2的global is not defined错误（仅保留v2时使用） #

若必须使用AWS SDK v2，需在Angular项目中补充全局变量配置：

• 在src/polyfills.ts中添加：

  (window as any).global = window;
  

• 在tsconfig.json的compilerOptions中补充路径配置：

  "paths": {
    "global": ["node_modules/global"]
  }
  

3. 解决ProfilesModule初始化错误 #

该错误源于懒加载模块循环引用或模板提前引用未初始化模块：

• 检查dashboard.component.html第103行，禁止直接引用ProfilesModule的导出内容，改为通过组件输入属性或服务传递数据；
• 确认懒加载路由配置正确，避免模块循环依赖：

  // app-routing.module.ts 示例
  const routes: Routes = [
    {
      path: 'dashboard',
      loadChildren: () => import('./profiles/profiles.module').then(m => m.ProfilesModule)
    }
  ];
  

4. 服务注入与调用验证 #

• 确保UploadService的providedIn: 'root'配置正确，无需在模块中额外声明；
• 组件中调用服务时，建议用异步语法处理结果：

  async uploadImage() {
    if (!this.selectedFileToUpload || this.selectedFileToUpload.name === 'img') {
      alert('Please select a file first!');
      return;
    }
    const success = await this.uploadService.uploadImage(this.selectedFileToUpload);
    if (success) {
      // 处理上传成功逻辑
    }
  }
  

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