包括串联的 Typescript JS outFile - Angular 2 + Typescript

Question

我有以下代码：

index.html

<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
<script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>   
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="node_modules/angular2/bundles/router.dev.js"></script>
<script src="node_modules/angular2/bundles/http.dev.js"></script>

<script src="test.js"></script

<script>

  System.import('test.js')
        .then(null, console.error.bind(console));
</script>

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false,
    "outFile": "test.js"
  },
  "exclude": [
    "node_modules",
    "typings/main",
    "typings/main.d.ts"
  ]
}

在我的项目的根目录中，我有一个由 tsc 创建的 "outFile" 命名为 "test.js" - 似乎所有组件、模块等都连接在 test.js 中正确但应用程序不加载除初始 "loading..." 以外的任何内容，并且在浏览器中访问 index.html 时没有控制台错误。'

另请注意，初始 index.html:

<body>
  <rz-app>Loading...</rz-app>
</body>

所以我实际上只是在 html 页面上得到了 "loading..."。

我一直在用头撞墙，我知道这很简单...

Q 那么，我做错了什么 - 如何在我的 html 中包含连接的 ts outFile？

Answer 1

在 tsc 编译器中指定 outFile 选项时，您需要以这种方式包含相应的文件 (test.js)：

<script src="test.js"></script>

<script>
  System.import('boot')
      .then(null, console.error.bind(console));
</script>

您需要在此处指定包含bootstrap 处理的模块的名称。如果对应的文件是boot.ts，模块会是boot:System.import('boot').

请注意，在这种情况下，模块的名称在 System.register 中的 test.js 文件中指定：

System.register("boot", // <-------------
  ['angular2/platform/browser', 'angular2/http', "app.component", "app.service"], function(exports_5, context_5) {
  "use strict";
  (...)
});

Answer 2

不确定是否已经解决了这个问题，但我运行遇到了同样的问题并发现这个问题已解决：

查看您的 test.js 文件（通过 tsc->outFile 输出的文件）并查找您的应用程序（看起来类似于 rzApp）。应该有一些代码看起来像 System.register("app", ["angular2/platform/browser", ... 名称（在本例中为 app）是您要在 System.import() 调用中使用的名称。所以在我的例子中，我使用了 System.import('app').then(null, console.error.bind(console)); 并且一切都开始工作了。确保 test.js 在 <script> 标签中。

我认为这与第一个答案中描述的内容相似，但我不清楚，所以我想我会以一种帮助我了解发生了什么的方式重新措辞。

Answer 3

如果此处发布的解决方案对您没有帮助，下面的解决方案对我有用。它部分基于@Thierry Templier 和@batesiic 的答案以及 this systemjs issue 中描述的答案的组合。我不确定它为什么会起作用，但似乎是因为应用程序包的格式被描述为 'register' 并且应用程序的地图是捆绑的 JS 文件的完整路径。这是我的 index.html:

的脚本块

<script src="/dist/bundledApp.js"></script> <!-- Needs to be here -->
<script>
    System.config({
        map: {
            app: 'dist/bundledApp.js', // <-- full path to bundled JS

            // other mappings...
        },
        packages: {
            app: {
                format: 'register', // <!-- this and the map.app value did the trick
                defaultExtension: 'js'
            },

            // other packages...
        }
    });
    System.import('main') // <-- the name of the main.ts file containing the 
                          //     bootstrapping logic and is bundled in the
                          //     bundledApp.js file as System.register("main", ["@angula...
        .then(null, console.error.bind(console));
</script>

System.import('main') 指向绑定的 JS 中定义的已注册模块，该模块是从我的 /src/main.ts 文件编译后的。这是我的 tsconfig.json:

{
    "compilerOptions": {
        "module": "system",
        "moduleResolution": "node",
        "noImplicitAny": false,
        "noEmitOnError": true,
        "sourceMap": true,
        "target": "es5",
        "experimentalDecorators": true,
        "emitDecoratorMetadata": true,
        "outFile": "./dist/bundledApp.js",
        "lib": [ "es2015", "dom" ],
        "suppressImplicitAnyIndexErrors": true
    },
    "exclude": [
        "node_modules"
    ],
    "include": [
        "./src/*.ts",
        "./src/**/*.ts"
    ],
    "compileOnSave": true // for VS2015
}

包括串联的 Typescript JS outFile - Angular 2 + Typescript

Including Concatenated Typescript JS outFile - Angular 2 + Typescript

typescript

systemjs

angular