Load combined modular typescript file with SystemJS

Question

I have been following the basic Angular2 implementation. With TypeScript v1.8 it should be possible to use system module with outfile so we can generated a combined file instead of multiple javascript files. I have a problem with SystemJS trying to load the combined file as I don't know exactly what parameters it needs (I've tried various combinations...) but I don't get any console errors and AngularJS isn't initialized.

This is the transpiled outfile

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);
};
///<reference path="../../node_modules/angular2/typings/browser.d.ts"/>
System.register("main", ["app.component", 'angular2/platform/browser'], function(exports_2) {
    "use strict";
    var app_component_1, browser_1;
    return {
        setters:[
            function (app_component_1_1) {
                app_component_1 = app_component_1_1;
            },
            function (browser_1_1) {
                browser_1 = browser_1_1;
            }],
        execute: function() {
            browser_1.bootstrap(app_component_1.AppComponent);
        }
    }
});

System.register("app.component", ['angular2/core'], function(exports_1) {
    "use strict";
    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);
        }
    }
});
//# sourceMappingURL=all.js.map

This is my tsconfig

{
  "scripts": {
    "postinstall": "npm run typings install"
  },
  "compilerOptions": {
    "target": "es5",
    "noImplicitAny": false,
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "outDir": "../wwwroot/",
    "module": "system",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "rootDir": ".",
    "outFile": "../wwwroot/dist/main.js"
  },
  "exclude": [
    "node_modules",
  ]
}

This is the html code

<html>
<head>
    <title>Angular 2 QuickStart</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- 1. Load libraries -->
    <!-- IE required polyfills, in this exact order -->
    <script src="lib/es6-shim.min.js"></script>
    <script src="lib/system-polyfills.js"></script>
    <script src="lib/angular2-polyfills.js"></script>
    <script src="lib/system.src.js"></script>
    <script src="lib/Rx.js"></script>
    <script src="lib/angular2.dev.js"></script>
    <!-- 2. Configure SystemJS -->
    <script>
      System.config({
        packages: {
          app: {
            format: 'register',
            defaultExtension: 'js'
          }
        }
      });
      System.import('dist/main.js')
            .then(null, console.error.bind(console));      
    </script>

</head>

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

</html>

emp · Accepted Answer · 2016-02-25 15:38:53Z

1

The solution was rather simple. I need to include the generated js file in the head:

<script src="dist/main.js"></script>

and keep the original SystemJS code:

<script>
      System.config({
        packages: {
          app: {
            format: 'register',
            defaultExtension: 'js'
          }
        }
      });
      System.import('app/main')
            .then(null, console.error.bind(console));
    </script>

answered Feb 25, 2016 at 15:38

emp

5,0962 gold badges40 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Load combined modular typescript file with SystemJS

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related