如何將 aws-iot-device-sdk NPM 模塊與 Angular 11 一起使用？ （它在構建時拋出 fs、path 和 tls 錯誤）

Question

我維護了一個基於瀏覽器的 Angular 應用程序，版本為 5.6。 這個應用程序有兩個組件，它們訂閱一個 IOT 主題並監聽更新（沒有發布，只是訂閱）。

我們需要升級到 Angular 11.0.3。 我已經完成了這項工作。 但是現在，當我嘗試運行本地 web 服務器或運行構建時，aws-iot-device-sdk NPM 模塊會導致這些錯誤：

Error: Can't resolve 'fs' in '[PATH_TO]/node_modules/aws-iot-device-sdk/common/lib'
Error: Can't resolve 'path' in '[PATH_TO]/node_modules/aws-iot-device-sdk/device'
Error: Can't resolve 'fs' in '[PATH_TO]/node_modules/aws-iot-device-sdk/device'
Error: Can't resolve 'tls' in '[PATH_TO]/node_modules/aws-iot-device-sdk/device/lib'

我花了很多時間在這個問題上拉頭發。 我們的前端（瀏覽器）IOT 代碼在過去幾年中一直運行良好。 但是必須升級到 Angular 11.0.3，這個問題是一個很大的障礙。

---

我們應用程序的示例代碼：

（我們的package.json在最后）

xxxx-app.component.ts 文件：

import { AwsIotService } from '../../shared/awsIot/awsIot.service';

this.awsIotService.getNewIotConnection(this.iotTopic, this.iotUrl, (iotClient) => {
    //cache the iotClient
    this.iotClient = iotClient;

    //handle the iotClient's message event
    iotClient.on('message', (topic, message) => {
        // process the message here:
        console.log('IOT Message received:');
        console.dir(message);
    });
});

awsIotService.ts：

在下面的代碼中，“iotUrl”指向我們編寫的自定義服務，該服務提供基於瀏覽器的 Angular 應用程序連接和訂閱所需的詳細信息：

awsIot = require('aws-iot-device-sdk'); //simply requiring that NPM module causes the errors stated above

getNewIotConnection (topic, iotUrl, callback) {
    this.httpClient.get(iotUrl).subscribe(responseData => {

         const client = this.awsIot.device({
                port: 443,
                protocol: 'wss',
                region: responseData.region,
                host: responseData.iotEndpoint,
                secretKey: responseData.secretKey,
                accessKeyId: responseData.accessKey,
                sessionToken: responseData.sessionToken,
            });

            // subscribe to the topic
            client.on('connect', () => client.subscribe(topic));

            // call the callback
            callback(client);
     });
}

---

我嘗試過的最新建議：

1 - 我試過使用https://www.npmjs.com/package/aws-iot-device-sdk-v2

....但沒有發現文檔有幫助...我希望我在這里遺漏了一些東西。

2我嘗試過 AWS 放大並遵循本教程：

https://docs.amplify.aws/start/getting-started/installation/q/integration/angular

...但是使用 AWS amplify 來解決這個問題需要對我們構建的后端進行返工，並且似乎需要為爆胎獲得新的傳輸（即只需要訂閱一個 IOT 主題）。

---

我嘗試過的較舊的解決方法：

3我嘗試將此添加到 package.json：

"browser": {
  "fs": false,
  "path": false,
  "os": false
}

...那沒有用。

4我嘗試將此添加到 package.json：

"dependencies": {
  ...other packages
  "mqtt": "2.15.1",
  "minimist": "1.2.0",
  "websocket-stream": "^5.0.1",
  "crypto-js": "3.1.6"
}

...那沒有用。

5我嘗試了此處詳述的 patch.js 方法：

https://gist.github.com/niespodd/1fa82da6f8c901d1c33d2fcbb762947d

...那沒有用。

6我嘗試將此添加到 webpack.config.js：

resolve: {
  fallback: {
    fs: false
  }
}

...那沒有用。

7我嘗試將此添加到 webpack.config.js：

node: {
  fs: 'empty'
}

...這不起作用（僅適用於較舊的 WebPack。）

---

我們的 package.json （僅依賴項和 devDependencies）：

  "dependencies": {
    "@angular/animations": "^11.0.3",
    "@angular/cdk": "^11.0.1",
    "@angular/common": "^11.0.3",
    "@angular/core": "^11.0.3",
    "@angular/forms": "^11.0.3",
    "@angular/platform-browser": "^11.0.3",
    "@angular/platform-browser-dynamic": "^11.0.3",
    "@angular/router": "^11.0.3",
    "@mapbox/mapbox-gl-draw": "^1.2.0",
    "@mapbox/mapbox-gl-geocoder": "^2.2.0",
    "@ng-bootstrap/ng-bootstrap": "^8.0.0",
    "@turf/helpers": "^6.0.0",
    "@turf/inside": "^5.0.0",
    "@turf/turf": "^5.1.6",
    "@types/lodash": "^4.14.165",
    "@types/unist": "^2.0.0",
    "angular-calendar": "^0.28.22",
    "aws-iot-device-sdk": "^2.2.6",
    "core-js": "^3.6.4",
    "date-fns": "^2.16.1",
    "intl": "^1.2.4",
    "jquery": "^3.1.1",
    "lodash": "^4.17.20",
    "mapbox-gl": "^2.0.0",
    "moment": "^2.12.0",
    "moment-timezone": "^0.5.27",
    "ng2-datepicker": "^3.1.1",
    "rxjs": "^6.5.4",
    "rxjs-compat": "^6.6.3",
    "selenium-webdriver": "^3.6.0",
    "tslib": "^2.0.0",
    "zone.js": "^0.11.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1100.3",
    "@angular/cli": "^11.0.3",
    "@angular/compiler": "^11.0.3",
    "@angular/compiler-cli": "^11.0.3",
    "@ngtools/webpack": "^11.0.3",
    "@types/jasmine": "^3.6.2",
    "@types/jquery": "^2.0.34",
    "@types/node": "^14.14.10",
    "@webpack-cli/serve": "^1.1.0",
    "angular-router-loader": "^0.8.5",
    "angular2-template-loader": "^0.6.2",
    "codelyzer": "^6.0.0",
    "copy-webpack-plugin": "^6.3.2",
    "cross-env": "^7.0.3",
    "css-loader": "^5.0.1",
    "exports-loader": "^1.1.1",
    "html-loader": "^1.3.2",
    "html-webpack-plugin": "^4.5.0",
    "jasmine-core": "^3.6.0",
    "jasmine-spec-reporter": "^5.0.0",
    "karma": "^5.2.3",
    "karma-chrome-launcher": "^3.1.0",
    "karma-coverage": "^2.0.3",
    "karma-coverage-istanbul-reporter": "^3.0.3",
    "karma-jasmine": "^4.0.1",
    "karma-jasmine-html-reporter": "^1.5.4",
    "karma-mocha-reporter": "^2.2.5",
    "mini-css-extract-plugin": "^1.0.0",
    "postcss": "^8.1.13",
    "postcss-import": "^13.0.0",
    "postcss-loader": "^4.1.0",
    "postcss-nested": "^5.0.2",
    "protractor": "^7.0.0",
    "raw-loader": "^1.0.0",
    "rimraf": "^3.0.2",
    "retyped-stripe-tsd-ambient": "^0.0.0-0",
    "sass": "^1.29.0",
    "sass-loader": "^10.1.0",
    "script-ext-html-webpack-plugin": "^2.1.5",
    "style-loader": "^2.0.0",
    "to-string-loader": "^1.1.6",
    "ts-loader": "^8.0.11",
    "ts-node": "^8.3.0",
    "tslint": "^6.1.0",
    "typescript": "4.0.3",
    "webpack": "^5.9.0",
    "webpack-cli": "^4.2.0",
    "webpack-dev-server": "^3.11.0"
  },

Answer 1

這有幫助嗎？ 作者似乎有/避免了和你一樣的麻煩。 他提到了：

   "browser": {
       "fs": false,
       "tls": false,
       "path": false
   },

Answer 2

我正在使用以下環境：

Angular CLI: 12.2.13
Node: 16.13.0 (Unsupported)
Package Manager: npm 8.1.0
OS: linux x64

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1202.13
@angular-devkit/build-angular   12.2.13
@angular-devkit/core            12.2.13
@angular-devkit/schematics      12.2.13
@angular/cdk                    12.2.12
@schematics/angular             12.2.13
ng-packagr                      12.2.5
rxjs                            6.6.7
typescript                      4.3.5

為了補充@kackle123 的方法，以下在package.json中為我工作：

"browser": {
    "http": false,
    "https": false,
    "net": false,
    "path": false,
    "stream": false,
    "tls": false,
    "fs": false
}