Module doesn't load in correct order

Question

.NET developer fairly new to modern, client-side web apps. I'm developing an Angular2 charting application using Chart.js. Modules are loaded with SystemJS.

This is my 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);

Some required components are loaded before the Angular module is initialised like this (main page, 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>

This produces the following output in the console:

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.

So System.import() returns a promise, right? And so does a promise's then() and catch() functions, right? So calling the then() function would wait for the previous call to finish before continuing, right? Yet, according to the console output, jasny-boostrap is loaded before bootstrap which is loaded before jquery, and so both of them fail to load. Even more confusing is that the load order is inconsistent; sometimes it looks like this:

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.

And sometime it looks like this:

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.

I google around and found a couple of posts suggesting that the meta.package.deps property can be used to tell SystemJS what a module depends on and to ensure that it loads first, but that didn't work for me.

Alternatively, I could always load jquery using a <script> tag in index.html, but I'd prefer to keep those to a minimum -- I'm already loading stylesheets with <style> tags, which I'm not too fond of, but I couldn't find a better solution, other than webpack, which, so far, for the life of me I couldn't figure out. Yet.

Obviously I'm missing something, but I have no idea what it is. Any and all input greatly appreciated.

Answer 1

This

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

is not doing what you think it's doing.

.then() waits for its this argument, load("es6-shim"), to complete, then calls a function you passed to it. But you are not passing a function to it, you are passing a promise returned by load, and your load calls System.import immediately without waiting for anything.

Try

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

Or you can keep the code that calls loadthe same, but rewrite load to return a function:

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);
            });
    }

}