Импорт jquery с SystemJS не работает

Question

Я не могу понять, как импортировать jQuery с SystemJS таким образом, чтобы он работал в моем проекте. 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> 
... 

ошибка:

(индекс): 26 Ошибка: JavaScript (SystemJS) Bootstrap требует JQuery Ошибка: JavaScript Bootstrap требует JQuery в 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

Это происходит потому, что сначала загружается загрузочный лоток.

Импорт асинхронный. Один может импортироваться перед другим. Для принудительного заказа:

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