SystemJS: Fix System.import with package file

Question

My out.js bundle file combines the main.js file and app.component.js. Now I want to import this out.js file into my index.html using SystemJS. Actually, I want to “name” the main (.js) module in it.

Now I am wondering how to import the internal module of my package file. Is the correct way to insert System.import (internal module) into external System.import (from the package)? It actually works, but I'm not sure that everything is in order.

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

out.js , System.register. , SystemJS, script.

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

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