2017-06-01 2 views
0

J'ai une simple application Aurelia basée sur le modèle aurelia navigation skeleton-typescript (https://github.com/aurelia/skeleton-navigation/tree/master/skeleton-typescript) et j'essaie de le faire accepter le fichier materia-dashboard.js de Creative Tim Material Dashboard (https://github.com/creativetimofficial/material-dashboard) sans chance.Comment ajouter le fichier JQuery 'js' d'une tierce partie au squelette de navigation d'aurelia typecript

Si je référence ceci dans index.html, lib ne sera pas accepté comme lorsqu'il est chargé, je reçois une erreur:

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

que je suppose signifie que ce fichier a la dépendance sur JQuery qui n'est pas chargé dans temps.

J'ai aussi essayé d'ajouter ceci à mes config.js

"material-dashboard:src/material-dashboard": { 
    "jquery": "npm:[email protected]" 
}, 

pointant simplement directement à sa source, ainsi que pour bundles.js

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

et le référencement est-il main.js comme bootstrap

import 'material-bootstrap'; 

mais cela donne le coup juste une autre erreur

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 

Une idée comment résoudre/comprendre ceci?

+0

Peut-être que dans 'dist' tout est compilé dans un paquet, donc' material-dashboard.js' n'est pas disponible? –

+0

Il doit être importé dans votre projet de la même manière que Bootstrap - il doit donc être inclus dans votre fichier main.js. Comment avez-vous réellement installé le paquet? – Tom

Répondre

0

Dans la documentation aurelia vous pouvez trouver comment bootstrap utilise jquery, dans le aurelia.json pour amorcer ce qui suit est ajouté:

"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" 
     ] 
    } 

avis en particulier l ' "exportation": "$" et "DEPS": ["jquery"]. Je suppose que pour matérialiser vous avez besoin de quelque chose de similaire

J'espère que cela aide.

0

Voilà comment je l'obtiens au travail:

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'; 

qui a finalement travaillé gulp watch