Import jquery mit SystemJS funktioniert nicht

Question

Ich kann nicht herausfinden, wie jQuery mit SystemJS auf eine Weise importieren, die es in meinem Projekt funktioniert. index.html:

... 
<script> 
    System.import('app').catch(function(err){ console.error(err); }); 
    System.import('jquery').catch(function(err){ console.error(err); }); 
    System.import('bootstrap').catch(function(err){ console.error(err); }); 
</script> 
... 

Fehler:

(Index): 26 Fehler: (SystemJS) Bootstrap des JavaScript erfordert jQuery Fehler: Bootstrap die JavaScript erfordert jQuery bei eval

systemjs.config. js

(function (global) { 
    System.config({ 
    paths: { 
     // paths serve as alias 
     'npm:': 'node_modules/' 
    }, 
    // map tells the System loader where to look for things 
    map: { 
     // our app is within the app folder 
     app: 'app', 

     // angular bundles 
     ... 

     'jquery': "npm:jquery/dist/jquery.min.js", 
     'bootstrap': "npm:bootstrap/dist/js/bootstrap.min.js", 

     // other libraries 
     'rxjs':      'npm:rxjs' 
    }, 
    // packages tells the System loader how to load when no filename and/or no extension 
    packages: { 
     app: { 
     main: './main.js', 
     defaultExtension: 'js' 
     }, 
     rxjs: { 
     defaultExtension: 'js' 
     } 
    } 
    }); 
})(this); 

Answer 1

Dies passiert, weil Bootstrap zuerst importiert wird.

Die Importe sind asynchron. Man kann vor dem anderen importieren. Um den Auftrag zu erzwingen:

System.import('jquery') 
.then(function($) { 
    System.import('bootstrap'); 
}) 
.catch(function(err){ console.error(err); });