使用SystemJS加载组合模块的typescript文件

时间:2016-02-18 09:10:12

标签: angularjs systemjs typescript1.8

我一直关注基本的Angular2 implementation。使用TypeScript v1.8,它应该是possible to use system module with outfile,因此我们可以生成组合文件而不是多个javascript文件。我有一个问题,SystemJS试图加载组合文件,因为我不知道它需要什么参数(我尝试了各种组合...)但我没有得到任何控制台错误和AngularJS尚未初始化。

这是已编译的文件

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

这是我的tsconfig

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

这是html代码

UPPERCASEA

1 个答案:

答案 0 :(得分: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>