Rodrigo Rodrigo - 1 year ago 141
TypeScript Question

Using none NPM modules with Aurelia

I need to integrate the

payment platform into my app. They have a javascript library that they require be used from their cdn.

I want to be able to use this library within my Typescript classes. The issue is since I can't import it because it is not a module when I try to use it I run into errors:

I've added
<script type="text/javascript" src=""></script>
to my

activate(params) {

Will generate a
error TS2304: Cannot find name 'SqPaymentForm'
error. How can I get around this? I know I could just do everything in my HTML file to get around this but that is clearly not the route I want to take.

I've attempted adding it to the aurelia.json file:

"name": "paymentform",
"path": "",
"exports": "SqPaymentForm"

However since Aurelia automatically appends a .js to the end of the file it ruins the url since the square url for their js file does not end in .js

Answer Source

Check out the Aurelia CLI Documentation. Specifically the section about importing a legacy library (in this case if your library isn't modular, it'll need to follow these steps).

Libraries that predate module systems can be a pain because they often rely on global scripts which must be loaded before the library. These libraries also add their own global variables. An example of one such library is bootstrap . Let's take a look at how to handle a legacy library like that.

A Legacy Library Dependency ES Next

"dependencies": [
      "name": "bootstrap",
      "path": "../node_modules/bootstrap/dist",
      "main": "js/bootstrap.min",
      "deps": ["jquery"],
      "exports": "$"

name - This is the name of the library as you will import it in your JavaScript or TypeScript code.

path - This is a path to the folder where the package's source is located. This path is relative to your application's src folder.

main - This is the main module (entry point) of the package, relative to the path. You should not include the file extension. .js will be appended automatically.

deps - This is an array of dependencies which must be loaded and available before the legacy library can be evaluated.

exports - This is the name of the global variable that should be used as the exported value of the module.

In your case, you'll have to point your path to your non npm module instead of something in the node_modules folder.


As of right now, the CLI doesn't support adding a dependency the way you need it (without a .js extension). However, if there are no real dependencies needed for this, what you can do is add a script tag to load up the module yourself.
You should be able to do that by adding the script

<script type="text/javascript" src=""></script>

to the index.html in the <head> tag, that way it's loaded before the body is loaded, and you need it in the app.js. When you access it anywhere in your view models, you might have to access it with window.SqPaymentForm, or whatever the exported variable name is from that library.

That being said, I'm going to try and get a PR in the CLI for revision numbers working, and while I'm in there I'll see if I can add this use case.
In the mean time, you could add a feature request to the Aurelia CLI repo referencing this issue.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download