如何在 Angular 9 的 webworker 中使用 aws-sdk？

Question

I installed aws-sdk :- npm install aws-sdk

然后在我的工作文件中導入 aws-sdk，如下所示：

app.worker.ts :- import * as AWS from 'aws-sdk';

然后嘗試 console.log 里面的 addEventListener 代碼在這里：-

    addEventListener('message', async ({ data }) => {
    console.log(AWS);
}

這樣做之后，我收到了屏幕截圖中的錯誤：

我也嘗試解決這個錯誤，因為我在 polyfills.ts 中定義了全局，盡管它不起作用

polyfills.ts :- (window as any).global = window;

任何幫助將不勝感激。 我想要實現的是我正在嘗試使用 aws-sdk 從我的 angular 項目中的 s3 上傳文件。 感謝你們！

Answer 1

它也可能對其他人有幫助，所以我給出了我如何解決問題的解決方案：-

Web 工人沒有全局window object。 所以要訪問全局 object 我們可以使用self代替。

所以為了解決我的問題，我按照以下步驟操作：

腳步：-

• 在app.worker.ts中，在前端項目中使用帶有全局AWS object 的 Type-Script 定義文件。 我們必須在工作文件的頂部添加引用類型，例如/// <reference types="aws-sdk" /> 。

• 定義 window const window = self;

• 然后在 import aws-sdk 腳本importScripts('assets/js/aws-sdk.js'); 然后我們將能夠訪問addEventListener('message', async ({ data }) => { console.log(window.AWS) });中的AWS object；

• 在這里，我從資產導入腳本，因為我必須自定義 aws-sdk 以避免調用s3.createMultipartUpload()時出現 window 未定義錯誤

• 這是自定義 aws_sdk 的鏈接https://raw.githubusercontent.com/nyaupane/customized_aws_sdk/master/assets/js/aws-sdk.js以防您的要求與我的相同，否則您可以根據您的要求進行自定義。

• 最終app.worker.ts將如下所示： https://github.com/nyaupane/customized_aws_sdk/blob/master/assets/worker/app.worker.ts

現在它非常適合分段上傳...在 angular9 web 工作人員中使用 aws_sdk。