SystemJS import specific module of typescript bundle

Question

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.

Answer 1

System.import('js/app-0.1.0.min')

<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')
    .then(null, console.error.bind(console));
</script>

Answer 2

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

SystemJS import specific module of typescript bundle

Question

2 answers

solution1
0 2016-02-27 01:10:31

solution2
0 ACCPTED 2016-02-28 01:09:39

SystemJS import specific module of typescript bundle

Question

2 answers

solution1 0 2016-02-27 01:10:31

solution2 0 ACCPTED 2016-02-28 01:09:39

solution1
0 2016-02-27 01:10:31

solution2
0 ACCPTED 2016-02-28 01:09:39