SystemJS 导入打字稿包的特定模块

Question

我正在尝试加载以下转译后的 js 包 "app-0.1.0.min.js" 的 "main" 模块：

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

转译为"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"
  ]
}

最后，我使用了 angular2 入门教程中的 SystemJS 实现，但是它对我不起作用，因为尚未加载 angular 应用程序。

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

获得此应用程序的任何想法都值得赞赏运行。

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

您已经加载脚本：

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

您不必使用 System.import 再次加载它们，您应该导入 bootstrap 模块

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

SystemJS 导入打字稿包的特定模块

SystemJS import specific module of typescript bundle

import

bundle

typescript

systemjs

angular