包括连接的 Typescript JS outFile - Angular 2 + Typescript答案

【问题标题】：Including Concatenated Typescript JS outFile - Angular 2 + Typescript包括连接的 Typescript JS outFile - Angular 2 + Typescript
【发布时间】：2017-01-19 03:14:05
【问题描述】：

我有以下代码：

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

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

还要注意初始index.html：

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

所以我实际上只是在 html 页面上得到“正在加载...”。

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

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

【问题讨论】：

标签： typescript angular systemjs

【解决方案1】：

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

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

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

【讨论】：

你刚刚为我节省了几个小时。非常感谢。

【解决方案2】：

在 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";
  (...)
});

【讨论】：

好的，它仍然在加载一个空白应用程序并且没有错误。在我的开发工具中，我可以看到源文件确实与里面的所有 JS 一起返回。还有其他想法吗？
您可以尝试将包含导入的 <script> 块移动到 HTML 页面的 body 块的此端...
此外，您需要导入包含引导处理的模块。如果它在一个名为bootstrap.ts 的文件中，您需要使用它：System.import('boostrap');。现在，每个System.register 的模块名称都在test.js 文件中指定。
我不完全理解您的最后评论。你能提供一个代码示例吗？也许更新您的答案，因为它不是解决方案。
仍然做不到 :( 你能有机会使用 NG2、Typescript 和 SystemJS 从头到尾做一个 hello world 示例吗？我可以让应用程序运行，但是当我尝试时移动文件并连接/缩小我遇到了问题。

【解决方案3】：

如果此处发布的解决方案对您没有帮助，以下方法对我有用。它部分基于@Thierry Templier 和@batesiic 的答案以及this systemjs issue 中描述的答案的组合。我不确定它为什么会起作用，但似乎是因为应用程序包的格式被描述为“注册”，而应用程序的地图是捆绑的 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') 指向从我的 /src/main.ts 文件编译后在捆绑 JS 中定义的注册模块。这是我的 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
}

【讨论】：