How to implement mavlink nodejs module on Angular Web App

Question

I have a project in which i need to create an app that is similar to mission planner but in web based form. I am using angular as a frontend development framework. Is there a way to use mavlink module in client side (browser) ? if there is, how can i implement it in angular ?

Answer 1

You should try Browserify, the latest version of node-mavlink has some dependencies on mavlink-mappings which imports the magic_id but it is missing in the latest version so you can use this version of mavlink-mappings "^1.0.8-20220318".For browserify you can follow these steps:

npm install -g browserify

Now run the usual Browserify command to bundle the JS file from the npm package:

browserify node_modules/location_of_the_file -o bundle.js

This will produce a bundle.js file outside of node_modules: This is the file you can bring into the front-end, as one would with a usual JS library. Then simply add the usual line in the header of my index.html file:

<script src="./bundle.js" type="module"></script>