无法引导 Angular 2 - 控制台上没有错误答案

【问题标题】：Not able to bootstrap angular2 - no errors on the cosole无法引导 Angular 2 - 控制台上没有错误
【发布时间】：2016-03-28 08:20:16
【问题描述】：

我正在使用 gulp 将 ts 转换为 js，并且我的 ts 文件与其他静态资源一起正确生成在 dist 文件夹中。

//tsconfig.js

    {
      "compilerOptions": {
        "outFile": "scripts.js",  //this can be commented to retain the original file structure instead of concatenating into one file
        "target": "es5",
        "module": "system",
        "moduleResolution": "node",
        "sourceMap": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "removeComments": false,
        "noImplicitAny": false
      },
      "exclude": [
        "gulpfile.js",
        "node_modules",
        "typings/main",
        "typings/main.d.ts"
      ]
    }

我使用 systemjs 导入 scripts.js

//index.html

        <!DOCTYPE html>
        <html>
        <head>
            <base href="/">
            <meta charset="UTF-8">
            <title>ZEFR</title>

            <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,700,600,700italic,400italic,600italic,800,800italic' rel='stylesheet' type='text/css'>

            <link rel="stylesheet" type="text/css" href="style.css">
        </head>
        <body>
            <my-app>Loading</my-app>
        </body>
        <script src="lib/es6-shim.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>
        <script src="lib/router.dev.js"></script>

        <script>
        System.config({
            packages: {
                dist: {
                    format: 'register',
                    defaultExtention: 'js'
                }
            }
        });
        System.import('scripts.js')
                .then(null, console.error.bind(console))
    </script>
    </html>

script.js 是我连接的 javascript 文件，包含我的所有组件。问题是我在控制台上没有任何错误。我觉得我需要定位 boot.js 而不是 script.js。我怎样才能在我的 dist 文件夹中做到这一点

//my project folder structure

    -public/
      -index.html
      -components/
        -boot/
          -boot.ts
        -app/
           -app.component.ts
         ...
      -dist/
         -scripts.js  //this is the concatenated file of all the js transpiled from ts
         -style.css
         -images/
         -lib/

【问题讨论】：

我尝试在编译时保持相同的文件夹结构。 dist包含对应ts文件的js文件。还是没有运气。相同的加载...屏幕

标签： typescript gulp angular transpiler

【解决方案1】：

这应该对你有帮助：

 System.import('dist/scripts')
            .then(null, console.error.bind(console))

您的scripts.js 在 dist 中，而您的索引在父目录中。而且你不需要在那里添加---.js。

【讨论】：

是的，我试过了，对我来说很有意义。但这在 angular2-pollyfills.js 中给了我一个错误，因为“加载 http:localhost:3000/dist/scripts.js 时出错
尝试将 system.js 放在 index.html 中的 polyfills 之上
dist: { format: 'register', defaultExtention: 'js' } 这是“dist”的问题。对我来说， dist 是使用 express 提供所有静态文件的文件夹
在使用 SystemJs 时，不应将所有文件合并到一个文件中。那是你的错。