Search code examples
typescriptangularsystemjsarangodbarangojs

Using ArangoJS Driver in Angular2 Web Application

I am working on a project using Angular2 and Typescript (v1.8.10). We want to integrate data from an ArangoDB database into the web application. I would like to use the arangojs driver if possible. As typings for the arangojs module do not exist yet (if they do exists can someone point me to them?) I am attempting to use the allowJs tsc compiler option. Everything transpiles fine however systemjs is unable to load the arangojs module. The following line in my ts file (outside of any class definition):

let arangojs = require("arangojs");

transpiles to:

var arangojs = require("arangojs");

however when I load my web application this require("arangojs") generates the following error:

(index):48 Error: (SystemJS) SyntaxError: Unexpected token <

Any advice or suggestions regarding how to use the arangojs driver in an Angular2 web application is welcome.

Thanks

Update

I found the error noted above. The error was due to a typo in my system.config.js. After fixing the typo the module failed to load due to errors loading the arangojs dependencies such as http, https, querystring, and many more. I am speculating that the module loader used behind the scenes by require is incompatible with systemjs used by Angular2. I was able to load the minified arangojs driver via 

<script src="arangojs.min.js"></script>

and then use

declare var arangojs : any

in my typescript file. I would prefer to use arangojs natively in the typescript environment though. Has anyone used the arangojs driver in an Angular2 typescript environment (rather than the hack i described above) and if so how did you get it to work?

Thanks again.

Solution

  • As you are trying to use the driver in the browser you should use the minified bundle (which correctly uses the web version of the network logic instead of the Node.js version).

    The browser bundle uses a UMD wrapper so it should be possible to load it with require if you can set up SystemJS to load the minified bundle instead of the NPM module.

    Otherwise you may be able to load the NPM module if you can convince your module loader to load the util/request.web.js instead of util/request.js. The bundle is built using Webpack, which does this automatically.