SystemJS: Correct System.import with bundle-file

Question

My bundle out.js file concatenates a main.js and an app.component.js module. Now I want to import this out.js file in my index.html with SystemJS. Actually I want to "call" the main(.js)-module in it.

I am now wondering how to import the inner module of my bundle file. Is it the right way to nest a System.import (of inner module) in an outer System.import (of bundle)? Actually it is working but I'm not sure if this is fine.

index.html

<script type="text/javascript" src="lib/out.js"></script>

<script>
    System.config({
        packages: {
            lib: {
                format: 'register',
                defaultExtension: 'js'
            }
        }
    });
    System.import('lib/out')
            .then(function() { // ---Is this the way to do it?---
                System.import('/main');
            }, console.error.bind(console));
</script>

out.js

System.register('app.component', ['angular2/core'], function(exports_1, context_1) {
  var __moduleName = context_1 && context_1.id;
  ..
}};

System.register('main', ['angular2/platform/browser', './app.component'], function(exports_1, context_1) {
  var __moduleName = context_1 && context_1.id;    
  ..
}};

Answer 1

In fact your out.js file registers your modules directly with a name using System.register. So these modules are directly available within SystemJS when you add this file with a script tag.

<script src="lib/out.js"></script>

<script>
  System.import('main')
        .then(null, console.error.bind(console));
</script>