Angular 15导入aws-sdk报错Uncaught ReferenceError: global is not defined求助

问题背景 #

使用Angular 15导入AWS SDK v2时，浏览器控制台报错Uncaught ReferenceError: global is not defined，尝试创建polyfills.ts、在main.ts/index.html注入全局变量均无效。

有效解决方案 #

方案1：通过Webpack配置注入全局变量 #

Angular 15基于Webpack 5，默认不再提供Node.js全局变量，需通过自定义Webpack配置提前注入：

1. 安装自定义Webpack构建工具：

   npm install @angular-builders/custom-webpack --save-dev
   

2. 在项目根目录创建webpack.config.js，添加以下内容：

   const webpack = require('webpack');
   
   module.exports = {
     plugins: [
       new webpack.ProvidePlugin({
         global: 'window'
       })
     ]
   };
   

3. 修改angular.json配置：
   • 找到projects -> [你的项目名称] -> architect -> build，将builder替换为@angular-builders/custom-webpack:browser，并在options中添加：

     "customWebpackConfig": {
       "path": "./webpack.config.js"
     }
     

   • 同样，将architect -> serve的builder替换为@angular-builders/custom-webpack:dev-server

方案2：切换到AWS SDK v3（推荐） #

AWS SDK v3采用模块化设计，体积更小且无需处理全局变量兼容问题：

1. 安装SQS客户端包：

   npm install @aws-sdk/client-sqs
   

2. 修改代码导入方式：

   import { SQSClient, SendMessageCommand } from "@aws-sdk/client-sqs";
   
   const sqs = new SQSClient({
     region: 'us-east-1',
     credentials: {
       accessKeyId: 'mykey',
       secretAccessKey: 'my secretkey'
     }
   });
   

为什么之前的方法无效 #

Angular 15的构建流程中，AWS SDK的加载优先级高于main.ts或index.html中的自定义脚本，导致注入的global变量无法被SDK检测到。通过Webpack的ProvidePlugin可以确保全局变量在所有模块加载前就已存在。

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