Модуль не загружен в правильном порядке

Question

.NET-разработчик довольно новичок в современных клиентских веб-приложениях. Я разрабатываю приложение для диаграмм Angular2, используя Chart.js. Модули загружаются SystemJS.

Это мой systemjs.config.js:

(function(global) 
{ 
    System.config(
    { 
     map: 
     { 
      "es6-shim": "node_modules/es6-shim", 
      "rxjs": "node_modules/rxjs", 
      "zone": "node_modules", 
      "reflect": "node_modules/reflect-metadata", 
      "jquery": "node_modules/jquery/dist", 
      "@angular": "node_modules/@angular", 
      "@angular/platform-browser": "node_modules/@angular/platform-browser", 
      "@angular/platform-browser-dynamic": "node_modules/@angular/platform-browser-dynamic", 
      "bootstrap": "node_modules/bootstrap", 
      "jasny-bootstrap": "bower_components/jasny-bootstrap", 
      "chart.js": "node_modules/chart.js", 
      "app_component": "app_modules" 
     }, 
     packages: 
     { 
      "es6-shim": { main: "es6-shim.min.js" }, 
      "rxjs": { main: "bundles/Rx.umd.min.js" }, 
      "zone": { main: "zone.js/dist/zone.min.js" }, 
      "reflect": { main: "Reflect.js" }, 
      "jquery": { main: "jquery.min.js" }, 
      "@angular/core": { main: "bundles/core.umd.min.js" }, 
      "@angular/common": { main: "bundles/common.umd.min.js" }, 
      "@angular/compiler": { main: "bundles/compiler.umd.min.js" }, 
      "@angular/router": { main: "bundles/router.umd.min.js" }, 
      "@angular/http": { main: "bundles/http.umd.min.js" }, 
      "@angular/platform-browser": { main: "bundles/platform-browser.umd.min.js" }, 
      "@angular/platform-browser-dynamic": { main: "bundles/platform-browser-dynamic.umd.min.js" }, 
      "bootstrap": { main: "dist/js/bootstrap.min.js" }, 
      "jasny-bootstrap": { main: "dist/js/jasny-bootstrap.min.js" }, 
      "chart.js": { main: "dist/Chart.bundle.min.js" }, 
      "app_component": { main: "init.js" } 
     }, 
     meta: 
     { 
      "bootstrap": { deps: [ "jquery" ] }, 
      "jasny-bootstrap": { deps: [ "bootstrap" ] } 
     } 
    }); 

})(this); 

Некоторые необходимые компоненты загружаются перед Угловая модуль инициализируется, как это (главная страница, index.html):

<script src="node_modules/systemjs/dist/system.src.js"></script> 
<script src="systemjs.config.js"></script> 
<script> 

    var load = function(packageName) 
    { 
     return System.import(packageName) 
      .then(function() 
      { 
       console.log(`Package "${ packageName }" loaded successfully.`); 
      }) 
      .catch(function(error) 
      { 
       console.error(`Package "${ packageName }" could not be loaded.`, error); 
      }); 
    } 

    load("es6-shim") 
     .then(load("reflect")) 
     .then(load("zone")) 
     .then(load("jquery")) 
     .then(load("bootstrap")) 
     .then(load("jasny-bootstrap")) 
     .then(load("chart.js")) 
     .then(load("ovafloweb")) 
     .catch(function(error) 
     { 
      console.log("Could not load one or more of the prerequisite components to launch the application.", error) 
     }); 

</script> 

В результате этого в консоли выводятся следующие данные:

Package "es6-shim" loaded successfully. 
Package "reflect" loaded successfully. 
Package "zone" loaded successfully. 
Package "jasny-bootstrap" could not be loaded. Error: (SystemJS) Jasny Bootstrap's JavaScript requires jQuery(…)(anonymous function) 
Package "chart.js" loaded successfully. 
Package "bootstrap" could not be loaded. Error: (SystemJS) Bootstrap's JavaScript requires jQuery(…)(anonymous function) 
Package "jquery" loaded successfully. 
Package "ovafloweb" loaded successfully. 

Итак, System.import() возвращает обещание, не так ли? И так действуют функции then() и catch(), верно? Поэтому вызов функции then() будет ждать завершения предыдущего вызова, прежде чем продолжить, не так ли? Тем не менее, в соответствии с выходом консоли, jasny-boostrap загружен до загрузочный бот, который загружается до jQuery, и поэтому оба они не могут загрузить. Еще более запутанным является то, что порядок загрузки несовместим; иногда это выглядит следующим образом:

Package "es6-shim" loaded successfully. 
Package "reflect" loaded successfully. 
Package "zone" loaded successfully. 
Package "jasny-bootstrap" could not be loaded. Error: (SystemJS) Jasny Bootstrap's JavaScript requires jQuery(…)(anonymous function) 
Package "jquery" loaded successfully. 
Package "bootstrap" loaded successfully. 
Package "chart.js" loaded successfully. 
Package "ovafloweb" loaded successfully. 

И иногда это выглядит следующим образом:

Package "es6-shim" loaded successfully. 
Package "reflect" loaded successfully. 
Package "zone" loaded successfully. 
Package "jquery" loaded successfully. 
Package "bootstrap" loaded successfully. 
Package "jasny-bootstrap" loaded successfully. 
Package "chart.js" loaded successfully. 
Package "ovafloweb" loaded successfully. 

я Google вокруг и нашел несколько сообщений, предполагающих, что свойство meta.package.deps можно сказать SystemJS, что модуль зависит от того, чтобы он загружался первым, но это не сработало для меня.

Кроме того, я всегда мог загрузить JQuery используя <script> тег в index.html, но я предпочел бы, чтобы те, к минимуму - я уже загрузки таблицы стилей с <style> тегами, которые я» я не очень люблю, но я не мог найти лучшего решения, кроме webpack, которое до сих пор для жизни меня не могло понять. Все же.

Очевидно, что у меня что-то не хватает, но я понятия не имею, что это такое. Всем приветствуется всякий вклад.

Answer 1

Этот

load("es6-shim") 
    .then(load("reflect")) 

не делать то, что вы думаете, что он делает.

.then() ждет своего аргумента this, load("es6-shim"), чтобы завершить, а затем вызывает функцию, которую вы ему передали. Но вы не передаете ему функцию, вы передаете обещание, возвращенное load, и ваш load звонит System.import немедленно, не дожидаясь ничего.

Попробуйте

load("es6-shim").then(function() { 
    return load("reflect"); 
}).then(function() { 
    return load(....); 
}).then(function() { 
    ... 

Или вы можете сохранить код, который вызывает load то же самое, но переписать load вернуть функцию:

var load = function(packageName) 
{ 
    return function() { 
     return System.import(packageName) 
      .then(function() 
      { 
       console.log(`Package "${ packageName }" loaded successfully.`); 
      }) 
      .catch(function(error) 
      { 
       console.error(`Package "${ packageName }" could not be loaded.`, error); 
      }); 
    } 

}