Import jquery with SystemJS doesn't work

Question

I can't figure out how to import jQuery with SystemJS in a way that it works into my project. 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>
...

error:

(index):26 Error: (SystemJS) Bootstrap's JavaScript requires jQuery Error: Bootstrap's JavaScript requires jQuery at 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

This is happening because bootstrap is importing first.

The imports are asynchronous. One may import before the other. To force order:

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