Using ngx-mqtt to connect to AWS IOT Core #193
Replies: 4 comments 9 replies
-
|
Could you please post what you found for angular 10 and maybe what you tried too (as a repository please)? |
Beta Was this translation helpful? Give feedback.
-
|
Thank you for your response. This is the example that I tried to follow for Angular 10 : https://dev.to/eelayoubi/decoupling-an-app-using-aws-iot-577a I have also found this link which is using Angular 9 : aws/aws-iot-device-sdk-js-v2#77 Below is my environment, code and error I get when I follow the link for the Angular 9 setup : aws/aws-iot-device-sdk-js-v2#77 I'm also using Angular 9 but on a windows 10 OS. I have added the latest code mentioned here 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. 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 Code import { io, iot, mqtt } from 'aws-iot-device-sdk-v2'; @Injectable({ constructor() { } ngOnInit(): void { const clientBootstrap = new io.ClientBootstrap(); // const myClient = iot.AwsIotMqttConnectionConfigBuilder // const config = myClient.with_client_id('wsssss') // const client = new mqtt.MqttClient(clientBootstrap); // const connection = client.new_connection(config); // connection.on('connect', (session_present) => { // connection.connect(); Error ERROR Error: Uncaught (in promise): ReferenceError: exports is not defined |
Beta Was this translation helpful? Give feedback.
-
|
Latest update on this issue. I still cant get the library to work with older Angular project. As you can see from my other posts I was able to get the library to work with newer Angular project. One thing to note is that I cannot just simply upgrade the Angular in older project as it has a lot of code already which might break. So I need to get this working with older project. I have seen working examples on Stack Overflow with even angular 7, so I know its possible. I have spend a lot of time but have had no luck. I hope you can guide me in the right direction. Below are the notable files from both Angular projects I have created and the latest error I get when I add the module to my main module Newer working solution: package.json { tsconfig.json /* To learn more about this file see: https://angular.io/config/tsconfig. */ app.module.ts import { BrowserModule } from '@angular/platform-browser'; import { AppRoutingModule } from './app-routing.module'; import { MqttModule, IMqttServiceOptions } from 'ngx-mqtt'; export const MQTT_SERVICE_OPTIONS: IMqttServiceOptions = { @NgModule({ Older project that throws error: package.json { tsconfig.json { main.module.ts import { CommonModule } from '@angular/common'; import { MqttModule, IMqttServiceOptions } from 'ngx-mqtt'; export const MQTT_SERVICE_OPTIONS: IMqttServiceOptions = { NgxBootstrapDatePickerConfigService.registerNgxBootstrapDatePickerLocales(); @NgModule({ }) Compile Error thrown after module is added to main.module.ts ERROR in ./node_modules/ngx-mqtt/ivy_ngcc/fesm2015/ngx-mqtt.js 568:12-29 |
Beta Was this translation helpful? Give feedback.
-
|
I was able to fix this issue by updating target on my tsconfig.josn file update it from fixed the issue |
Beta Was this translation helpful? Give feedback.
-
|
I have got the AWS IOT working in Angular 11 (did work also in prior versions) by generating in the backend signed url for the connection. For the backend I use Python and aws_signv4_mqtt library. It needs IAM credentials having policy that allows certain client names (having fixed prefix) to connect to IOT endpoint and be able to Subscribe and Receive from certain topics. Those credentials can be used to sign the url for AWS IOT core websocket endpoint This url is returned to Frontend Angular and used when connection to MQTT using transformWsUrl Technically same could be achieved in Angular only by using AWS sdk's I would assume. I just did find it easier to sign the url in the backend. I know this is not full code sample but hopefully would guide towards one possible solution. |
Beta Was this translation helpful? Give feedback.
-
|
Thank you for your response: I will try your solution with using AWS .NET SDK to get signed URL. Wanted to make sure a few things. Are you using ngx-mgtt for your angular library for connecting to AWS using the signed URL? |
Beta Was this translation helpful? Give feedback.
-
|
Would it be possible for your to share your Angular code service class and component? After installation running "npm install ngx-mqtt --save" I get error when I try to import the module to my main module which my component is under. I get same error when I try to inject the service in my component. Wanted to see if you got this error using Angular 9: "export 'MqttClient' (imported as 'ɵngcc1') was not found in 'mqtt-browser' |
Beta Was this translation helpful? Give feedback.
-
|
Sure, in my MqttClass there is some other service dependencies but I assume you can figure those out In components where I need to connect/subscribe to topics constructor( this.mqtt.eventFeed.subscribe( |
Beta Was this translation helpful? Give feedback.
-
|
@jariair Thanks again for your quick reply. I decided to create a new Angular project and add your suggestion there so I can at least get it working with latest version before I start to figure out why I'm getting those module errors in my project. I have simply added the connect logic into my component, just to make sure I can connect before adding anything else. Just note that the URL generated from the python code I have added substituted xxxxx's for access key, secret_key and on the host so its not shared over internet. But I have tried it with the real keys for my AWS account. I made sure that host endpoint and keys work by publishing to a topic using the "AmazonIotDataClient" from .NET SDK and checking those messages are successfully send by subscribing to that topic on the AWS MQTT test client on the web browser console. So right now I have no clue why I'm getting below error: mqtt.js:4441 WebSocket connection to 'wss://xxxxxxxxxxxxx-ats.iot.us-west-2.amazonaws.com/mqtt?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=xxxxxxxxxxxxxxxxx%2F20211101%2Fus-west-2%2Fiotdevicegateway%2Faws4_request&X-Amz-Date=20211101T205236Z&X-Amz-SignedHeaders=host&X-Amz-Signature=xxxxxxxxxxxxxxxx' failed: The error does not tell me what is wrong. Just says failed. I figure maybe you can try this code on your end and see if you can get connected successfully. Appreciate your help. Below are the notable files in my new project: |
Beta Was this translation helpful? Give feedback.
-
|
I figured out the problem. When I was generating the URL with python I just had to remove the https:// from the iot_host Once again thanks for your help |
Beta Was this translation helpful? Give feedback.
-
|
Yes I'm using ngx-mqtt Angular library, currently using version 7.0.9 so would need to update at some point. |
Beta Was this translation helpful? Give feedback.
-
|
OK great. Seems like I cannot find anything for the .NET SDK to generate singed URL for AWS MQTT. There is something for generating for S3 but nothing for MQTT seems like. Might have to create a workaround using Python API to fetch the URL. Thanks again for your time |
Beta Was this translation helpful? Give feedback.
-
|
@sclausen "export 'MqttClient' (imported as 'ɵngcc1') was not found in 'mqtt-browser' |
Beta Was this translation helpful? Give feedback.
-
Hi Team,
Has anyone been able to use this Angular wrapper to connect AWS IOT Core using Angular 9? I'm trying to subscribte to AWS IOT Core topic using my Angular 9 front end framework but I have had no luck. I cannot find a working example anywhere. Saw one for Angular 10 but I could not get it to work. Not even sure if its possible. Any help or guidance would be greatly appreciated.
Thanks
Beta Was this translation helpful? Give feedback.
All reactions