How to add 3rd party JQuery 'js' file to aurelia typescript navigation skeleton

Question

I have simple Aurelia app based on aurelia navigation skeleton-typescript template ( https://github.com/aurelia/skeleton-navigation/tree/master/skeleton-typescript ) and I am trying to make it accept materia-dashboard.js file from Creative Tim Material Dashboard ( https://github.com/creativetimofficial/material-dashboard ) with no luck.

If I reference this in index.html, lib will not be accepted as when loaded, I get an error:

Uncaught ReferenceError: $ is not defined
    at material-dashboard.js:38
    at material-dashboard.js:46

which I guess means that this file has dependency on JQuery which is not loaded in time.

I have also tried adding this to my config.js

"material-dashboard:src/material-dashboard": {
  "jquery": "npm:jquery@2.2.4"
},

just pointing it directly to its source as well as to bundles.js

"dist/aurelia": {
    "includes" : [ ..., "material-dashboard", ...]
}

and referencing is it main.js like bootstrap

import 'material-bootstrap';

but this just kicks another error

system.src.js:1041
GET http://localhost:9000/dist/material-dashboard.js 404 (Not Found)
    W @ system.src.js:1041
    (anonymous) @ system.src.js:1777
    e._execute @ bluebird.min.js:31
    i._resolveFromExecutor @ bluebird.min.js:32
    i @ bluebird.min.js:32
    (anonymous) @ system.src.js:1776
    (anonymous) @ system.src.js:2801
    (anonymous) @ system.src.js:3379
    (anonymous) @ system.src.js:3711
    (anonymous) @ system.src.js:4103
    (anonymous) @ system.src.js:4568
    (anonymous) @ system.src.js:4837
    (anonymous) @ system.src.js:408
    r @ bluebird.min.js:33
    i._settlePromiseFromHandler @ bluebird.min.js:32
    i._settlePromise @ bluebird.min.js:32
    i._settlePromise0 @ bluebird.min.js:32
    i._settlePromises @ bluebird.min.js:32
    r._drainQueue @ bluebird.min.js:31
    r._drainQueues @ bluebird.min.js:31
    drainQueues @ bluebird.min.js:31

bluebird.min.js:33 
Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:9000/dist/material-dashboard.js
    Error: XHR error (404 Not Found) loading http://localhost:9000/dist/material-dashboard.js
    Error loading http://localhost:9000/dist/material-dashboard.js as "material-dashboard" from http://localhost:9000/dist/main.js

Any idea how to solve/understand this?

Answer 1

In the aurelia documentation you can find how bootstrap uses jquery, in the aurelia.json for bootstrap the following is added :

"dependencies": [
  {
    "name":"jquery",
    "path":"../node_modules/jquery/dist",
    "main":"jquery.min",
    "export": "$"
  },
  {
      "name": "bootstrap",
      "path": "../node_modules/bootstrap/dist",
      "main": "js/bootstrap.min",
      "deps": ["jquery"],
      "resources": [
        "css/bootstrap.css"
      ]
  }

notices especially the "export": "$" and "deps": ["jquery"]. I suppose for materialize you need something similar

I hope this helps.

Answer 2

this is how I get it to work:

config.js

"material": "/assets/js/material.min.js",
"material-dashboard": "/assets/js/material-dashboard.js"

bundles.js

"dist/aurelia": {
    "includes" : [ ...,"material", "material-dashboard", ...]
}

main.js

import 'material';
import 'material-bootstrap';

which finally worked gulp watch