3AGSystemsShervin
commented
2 years ago Update on this issue. I was able to get the solution mentioned here (https://github.com/aws/aws-iot-device-sdk-js-v2/issues/77) to work using newer version of Angular. I believe I need to update one of files or libraries but I cannot figure out which one is causing the problem. As mentioned in my previous post as soon as I add the first line of code I get same ReferenceError: exports is not defined error mentioned above.
Here is my two project notable files.
New Working Solution:
package.json
{ "name": "aws-test2", "version": "0.0.0", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" }, "private": true, "dependencies": { "@angular/animations": "~11.0.1", "@angular/common": "~11.0.1", "@angular/compiler": "~11.0.1", "@angular/core": "~11.0.1", "@angular/forms": "~11.0.1", "@angular/platform-browser": "~11.0.1", "@angular/platform-browser-dynamic": "~11.0.1", "@angular/router": "~11.0.1", "aws-crt": "^1.10.2", "aws-iot-device-sdk-v2": "^1.6.3", "buffer": "^6.0.3", "rxjs": "~6.6.0", "tslib": "^2.0.0", "zone.js": "~0.10.2" }, "devDependencies": { "@angular-devkit/build-angular": "~0.1100.2", "@angular/cli": "~11.0.2", "@angular/compiler-cli": "~11.0.1", "@types/jasmine": "~3.6.0", "@types/node": "^12.11.1", "codelyzer": "^6.0.0", "jasmine-core": "~3.6.0", "jasmine-spec-reporter": "~5.0.0", "karma": "~5.1.0", "karma-chrome-launcher": "~3.1.0", "karma-coverage": "~2.0.3", "karma-jasmine": "~4.0.0", "karma-jasmine-html-reporter": "^1.5.0", "protractor": "~7.0.0", "ts-node": "~8.3.0", "tslint": "~6.1.0", "typescript": "~4.0.2" } }
tsconfig.json
/ To learn more about this file see: https://angular.io/config/tsconfig. / { "compileOnSave": false, "compilerOptions": { "allowSyntheticDefaultImports": true, "baseUrl": "./", "outDir": "./dist/out-tsc", "forceConsistentCasingInFileNames": true, "strict": true, "noImplicitReturns": true, "noFallthroughCasesInSwitch": true, "sourceMap": true, "declaration": false, "downlevelIteration": true, "experimentalDecorators": true, "moduleResolution": "node", "importHelpers": true, "target": "es2015", "module": "es2020", "lib": [ "es2018", "dom" ] }, "angularCompilerOptions": { "strictInjectionParameters": true, "strictInputAccessModifiers": true, "strictTemplates": true } }
polyfills.ts
import 'zone.js/dist/zone'; // Included with Angular CLI.
(window as any).global = window;
(window as any).global.Buffer = (window as any).global.Buffer || require('buffer').Buffer; import * as process from 'process'; window.process = process;
Older Project with error:
package.json
{ "name": "abp-zero-template", "version": "9.3.0", "license": "MIT", "angular-cli": {}, "scripts": { "ng": "ng", "publish": "gulp build && ng build --prod", "start": "gulp buildDev && ng serve --host 0.0.0.0 --port 4200", "hmr": "gulp buildDev && ng serve --host 0.0.0.0 --port 4200 --hmr", "test": "gulp buildDev && ng test", "pree2e": "webdriver-manager update --standalone false --gecko false", "e2e": "gulp buildDev && protractor", "create-dynamic-bundles": "gulp buildDev", "nswag": "cd nswag/ && refresh.bat" }, "private": false, "dependencies": { "@angular/animations": "^10.0.2", "@angular/cdk": "^10.0.1", "@angular/common": "^10.0.2", "@angular/compiler": "^10.0.2", "@angular/core": "^10.0.2", "@angular/forms": "^10.0.2", "@angular/platform-browser": "^10.0.2", "@angular/platform-browser-dynamic": "^10.0.2", "@angular/platform-server": "^10.0.2", "@angular/router": "^10.0.2", "@fullcalendar/core": "^5.1.0", "@microsoft/signalr": "^3.1.3", "@shopify/draggable": "^1.0.0-beta.8", "@swimlane/ngx-charts": "^14.0.0", "abp-ng2-module": "^6.2.0", "abp-web-resources": "^5.3.0", "adal-angular": "^1.0.17", "angular-gridster2": "^10.0.1", "angular-ng-autocomplete": "^2.0.1", "angular-oauth2-oidc": "^10.0.2", "angular2-counto": "^1.2.5", "angular2-text-mask": "^9.0.0", "animate.css": "^4.1.0", "apexcharts": "^3.27.2", "chart.js": "^2.9.3", "cookieconsent": "^3.1.1", "core-js": "^3.6.4", "d3": "^6.2.0", "d3-tile": "^1.0.0", "daterangepicker": "^3.1.0", "famfamfam-flags": "^1.0.0", "js-cookie": "^2.2.1", "just-compare": "^1.3.0", "localforage": "^1.7.3", "lodash": "^4.17.13", "moment": "^2.24.0", "moment-timezone": "^0.5.28", "msal": "^1.2.2", "ng-apexcharts": "^1.5.12", "ng-select": "^1.0.2", "ng2-file-upload": "^1.4.0", "ngx-bootstrap": "^5.6.1", "ngx-captcha": "^8.0.1", "ngx-image-cropper": "^3.1.4", "ngx-perfect-scrollbar": "^9.0.0", "ngx-spinner": "^9.0.1", "object-path": "^0.11.4", "primeicons": "^4.0.0", "primeng": "^9.1.2", "push.js": "^1.0.12", "quill": "^1.3.7", "rtl-detect": "^1.0.2", "rxjs": "^6.5.4", "simple-line-icons": "^2.4.1", "sweetalert2": "^9.10.7", "text-mask-addons": "^3.8.0", "topojson": "^3.0.2", "tslib": "^2.0.0", "webdriver-manager": "^12.1.7", "zone.js": "~0.10.2" }, "devDependencies": { "@angular-devkit/build-angular": "~0.1000.0", "@angular/cli": "^10.0.0", "@angular/compiler-cli": "^10.0.2", "@angularclass/hmr": "^2.1.3", "@angularclass/hmr-loader": "^3.0.4", "@types/d3": "^6.2.0", "@types/jasmine": "~3.5.10", "@types/jasminewd2": "^2.0.8", "@types/lodash": "^4.14.149", "@types/moment-timezone": "^0.5.13", "@types/node": "^14.0.14", "codelyzer": "^6.0.0", "globby": "^11.0.1", "gulp": "^4.0.1", "gulp-clean-css": "^4.3.0", "gulp-concat": "^2.6.1", "gulp-less": "^4.0.1", "gulp-postcss": "^8.0.0", "gulp-uglify": "^3.0.2", "jasmine-core": "~3.5.0", "jasmine-spec-reporter": "~5.0.0", "karma": "~5.1.0", "karma-chrome-launcher": "~3.1.0", "karma-cli": "~2.0.0", "karma-coverage-istanbul-reporter": "~3.0.2", "karma-jasmine": "~3.3.0", "karma-jasmine-html-reporter": "^1.5.0", "merge-stream": "^2.0.0", "nswag": "13.6.2", "postcss-url": "^9.0.0", "protractor": "~7.0.0", "ts-node": "~8.10.2", "tslint": "~6.1.0", "typescript": "3.9.6" } }
tsconfig.json { "compilerOptions": { "allowSyntheticDefaultImports": true, "declaration": false, "emitDecoratorMetadata": true, "experimentalDecorators": true, "lib": ["es6", "dom"], "mapRoot": "./", "module": "esnext", "skipLibCheck": true, "moduleResolution": "node", "outDir": "../dist/out-tsc", "sourceMap": true, "target": "es5", "typeRoots": ["../node_modules/@types"], "baseUrl": ".", "paths": { "@app/": ["./app/"], "@account/": ["./account/"], "@shared/": ["./shared/"], "@node_modules/": ["../node_modules/"], "@angular/": ["../node_modules/@angular/"], "@metronic/": ["./assets/metronic/"] } }, "angularCompilerOptions": { "fullTemplateTypeCheck": true, "strictTemplates": true, "strictInputTypes": false, "strictAttributeTypes": false, "strictOutputEventTypes": false, "strictDomEventTypes": false, "strictLiteralTypes": false, "strictInjectionParameters": false } }
polyfils.ts // This file includes polyfills needed by Angular 2 and is loaded before // the app. You can add your own extra polyfills to this file. import 'core-js/es/array'; import 'core-js/es/date'; import 'core-js/es/function'; import 'core-js/es/map'; import 'core-js/es/math'; import 'core-js/es/number'; import 'core-js/es/object'; import 'core-js/es/parse-float'; import 'core-js/es/parse-int'; import 'core-js/es/reflect'; import 'core-js/es/regexp'; import 'core-js/es/set'; import 'core-js/es/string'; import 'core-js/es/symbol'; import 'core-js/es/reflect'; import { finalize } from 'rxjs/operators'; import 'zone.js/dist/zone';
(window as any).global = window;
jmklix
github-actions[bot]
Hi team,
Hi team,
I could not find any working example for Angular 9 for subscribing and publishing to AWS IOT so any help would be greatly appreciated. I have been trying to follow this example from a thread on this board (https://github.com/aws/aws-iot-device-sdk-js-v2/issues/77) to establish a connection and subscribe to a specific topic. I'm also using Angular 9 but on a windows 10 OS. I have added the latest code mentioned in the link to my component but I get an error as soon as I uncomment the first line of code ( const clientBootstrap = new io.ClientBootstrap()).
Also when I add the suggested code to my polyfills.ts it gives a error below so I tried the code without making any changes to my polyfills.ts and import statements are not giving any errors and it compiles successfully. (polyfills.ts:20 Uncaught TypeError: Cannot read properties of undefined (reading 'Buffer'). at Module../src/polyfills.ts (polyfills.ts:20) at webpack_require (bootstrap:84) at Object.2 (polyfills.ts:22) at webpack_require (bootstrap:84) at checkDeferredModules (bootstrap:45) at Array.webpackJsonpCallback [as push] (bootstrap:32) at polyfills.js:1s)
One thing to mention is for my project setup its recommended that I use Yarn however I have added other libraries using NPM and I have not had any issues mixing the two for installing libraries on same project. Not sure if that matters but I figured I mention it here
Below are the details to my environment, code and error I get :
Environment
Angular 9, aws-iot-device-sdk-v2, Windows 10
Node: 12.17.0 NPM: 6.14.4
Code
import { io, iot, mqtt } from 'aws-iot-device-sdk-v2'; import { Injectable } from '@angular/core';
@Injectable({ providedIn: 'root' }) export class AWSIoTService {
constructor() { }
ngOnInit(): void {
const clientBootstrap = new io.ClientBootstrap();
// const myClient = iot.AwsIotMqttConnectionConfigBuilder // .new_with_websockets({ // region: 'ap-southeast-1', // credentials_provider: undefined, // proxy_options: undefined // });
// const config = myClient.with_client_id('wsssss') // .with_clean_session(true) // .with_credentials('ap-southeast-1', 'xxxx', 'xxxx', '') // .with_endpoint('xxxx-ats.iot.ap-southeast-1.amazonaws.com') // .build();
// const client = new mqtt.MqttClient(clientBootstrap);
// const connection = client.new_connection(config);
// connection.on('connect', (session_present) => { // console.log(session_present); // console.log('connected'); // connection.subscribe('/test/me/senpai', mqtt.QoS.AtLeastOnce, (topic, payload) => { // const decoder = new TextDecoder('utf8'); // const message = decoder.decode(payload); // console.log(
message received: topic=${topic} message=${message}); // }).then(subscription => { // return connection.publish(subscription.topic, 'NOTICE ME', subscription.qos); // }); // });// connection.connect(); } }
Error
ERROR Error: Uncaught (in promise): ReferenceError: exports is not defined ReferenceError: exports is not defined at Module../node_modules/aws-iot-device-sdk-v2/dist/iotidentity/iotidentityclient.js (app-main-main-module.js:36927) at webpack_require (runtime.js:85) at Object../node_modules/aws-iot-device-sdk-v2/dist/index.js (app-main-main-module.js:36777) at webpack_require (runtime.js:85) at Module../src/app/main/logicalunitview/logicalunitview.component.ts (app-main-main-module.js:151715) at webpack_require (runtime.js:85) at Module../src/app/main/main-routing.module.ts (app-main-main-module.js:152268) at webpack_require (runtime.js:85) at Module../src/app/main/main.module.ts (app-main-main-module.js:152373) at webpack_require (runtime.js:85) at resolvePromise (polyfills.js:13260) at resolvePromise (polyfills.js:13203) at polyfills.js:13329 at ZoneDelegate.invokeTask (polyfills.js:12710) at Object.onInvokeTask (vendor.js:109700) at ZoneDelegate.invokeTask (polyfills.js:12710) at Zone.runTask (polyfills.js:12460) at drainMicroTaskQueue (polyfills.js:12926)