Загрузить комбинированный модульный файл машинописного текста с помощью SystemJS

Я следил за базовой реализацией Angular2. С TypeScript v1.8 это должно быть можно использовать системный модуль с выходным файлом, чтобы мы могли сгенерировать комбинированный файл вместо нескольких файлов javascript. У меня проблема с SystemJS, пытающимся загрузить объединенный файл, поскольку я точно не знаю, какие параметры ему нужны (я пробовал разные комбинации...), но я не получаю никаких ошибок консоли, и AngularJS не инициализирован.

Это транспилированный файл

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

Это мой тсконфиг

{
  "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",
  ]
}

Это html-код

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

angularjs systemjs typescript1.8
person emp    schedule 18.02.2016    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Решение было довольно простым. Мне нужно включить сгенерированный файл js в голову:

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

и сохраните исходный код SystemJS:

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