【发布时间】：2020-12-20 17:55:38
【问题描述】：
我维护一个基于浏览器的 Angular 应用程序，该应用程序的版本为 5.6。这个应用程序有两个组件，它们订阅一个 IOT 主题并监听更新（没有发布，只是订阅）。
我们需要升级到 Agnular 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 amplify 并按照本教程进行操作：
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"
},
【问题讨论】：
-
听起来你想要一个 NodeJS 包..？这在浏览器中不起作用..
-
@MikeOne - 问题中的代码多年来一直运行良好（字面意思）。似乎 aws-iot-device-sdk 模块的依赖项之一依赖于“fs”模块，而 Angular 不再允许该模块。我无法理解的是如何没有严格的方法来解决这个问题。使用 AWS Amplify 似乎有点矫枉过正。
-
Fs 是文件系统。仅在节点中可用，在浏览器中不可用。你可能有错误的包
-
@MikeOne - 不确定你是否明白我的意思：是的，我了解 fs 模块是什么。我要说的是，实施 aws-iot-device-sdk 模块运行良好，并且多年来一直如此。最新版本的 Angular 不允许这种依赖。那里有许多解决方法（在我的问题中有详细说明），但它们现在都已经过时了。我希望能找到一个有效的。
-
@MikeOne 是的，他有正确的包。您误解了 OP，并且让初学者感到困惑，他们可能会使用哪个 AWS IoT 包...
标签： javascript angular amazon-web-services iot