Search code examples
importtypescriptbundleangularsystemjs

SystemJS import specific module of typescript bundle

I am trying to load the "main" module of the following transpiled js-bundle "app-0.1.0.min.js":

var __decorate = (this && this.__decorate) || function(decorators, target, key, desc) {
  var c = arguments.length,
    r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc,
    d;
  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
  else
    for (var i = decorators.length - 1; i >= 0; i--)
      if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
  return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function(k, v) {
  if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
System.register("app.component", ['angular2/core'], function(exports_1, context_1) {
  "use strict";
  var __moduleName = context_1 && context_1.id;
  var core_1;
  var AppComponent;
  return {
    setters: [
      function(core_1_1) {
        core_1 = core_1_1;
      }
    ],
    execute: function() {
      AppComponent = (function() {
        function AppComponent() {}
        AppComponent = __decorate([
          core_1.Component({
            selector: 'my-app',
            template: '<h1>My First Angular 2 App</h1>'
          }),
          __metadata('design:paramtypes', [])
        ], AppComponent);
        return AppComponent;
      }());
      exports_1("AppComponent", AppComponent);
    }
  }
});
System.register("main", ['angular2/platform/browser', "app.component"], function(exports_2, context_2) {
  "use strict";
  var __moduleName = context_2 && context_2.id;
  var browser_1, app_component_1;
  return {
    setters: [
      function(browser_1_1) {
        browser_1 = browser_1_1;
      },
      function(app_component_1_1) {
        app_component_1 = app_component_1_1;
      }
    ],
    execute: function() {
      browser_1.bootstrap(app_component_1.AppComponent);
    }
  }
});

//# sourceMappingURL=app-0.1.0.min.js.map

Transpiled with this "tsconfig.json":

{
  "compilerOptions": {
    "target": "es5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": true,
    "noImplicitAny": false,
    "sortOutput": true,
    "outFile": "app-0.1.0.min.js"
  },
  "exclude": [
    "node_modules",
    "typings/main",
    "typings/main.d.ts"
  ]
}

Finally I am using the SystemJS implementation from the angular2 get started tutorial, however it is not working for me, since the angular app hasn't been loaded.

<script src="js/app-0.1.0.min.js"></script>

<!-- 3. Configure SystemJS -->
<script>
  System.config({
    packages: {
      js: {
        format: 'register',
        defaultExtension: 'js'
      }
    }
  });
  System.import('js/app-0.1.0.min.js') //System.import('js/app-0.1.0.min')
    .then(null, console.error.bind(console));
</script>

<!-- 4. Display the application -->
<body>
    <my-app>Loading...</my-app>  
</body>

Any ideas appreciated to get this app running.

Solution

  • You already loaded your scripts with:

    <script src="js/app-0.1.0.min.js"></script>

    you don't have to load them again with System.import, instead you should import your bootstrap module

      System.import('main')
    .then(null, console.error.bind(console));