使用 SystemJS 加载组合的模块化打字稿文件

Question

我一直在关注基本的 Angular2 implementation. With TypeScript v1.8 it should be possible to use system module with outfile 所以我们可以生成一个组合文件而不是多个 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

这是我的 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",
  ]
}

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

Answer 1

解决方法很简单。我需要在头部包含生成的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>

使用 SystemJS 加载组合的模块化打字稿文件

Load combined modular typescript file with SystemJS

angularjs

systemjs

typescript1.8