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中正确连接但应用程序没有' t加载除初始“loading ...”以外的任何内容，并且在浏览器中访问index.html时没有控制台错误。'

还要注意最初的index.html：

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

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

我一直在靠墙打我的头，我知道这很简单......

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

Answer 1

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

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

我认为这与第一个答案中描述的相似，但我不清楚，所以我想我会以一种帮助我意识到发生了什么的方式重新说出来。

Answer 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')。

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

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

Answer 3

如果此处发布的解决方案对您没有帮助，以下为我做了诀窍。它部分基于@Thierry Templier和@ batesiic的答案以及this systemjs issue中描述的答案的组合。我不确定它为什么会起作用，但似乎是因为应用程序包的格式被描述为＆＃39; register＆＃39;应用程序的映射是捆绑的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
}

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

3 个答案: