为什么赢了'；我的angular 2应用程序是否启动？

我正在尝试构建一个样板模板，使用express、angular 2、typescript、gulp和systemjs引导angular 2应用程序。由于某些原因，我的index.html文件无法识别我的

bootstrap.js

文件。我所有的

jade

和

typescript

都位于

src

中。我正在使用gulp将typescript从

src

传输到

dist

，并在express中从

node\u模块和
jspm\u包提供静态资产。但当最终调用
System.import
时，如下所示：
System.import（'app'）.catch（console.error.bind（console））
，
我得到：

错误：语法错误：意外标记<
评价http://localhost:3000/app/bootstrap.js
加载错误http://localhost:3000/app/bootstrap.js

该错误似乎是由
angular2 polyfills.min.js
引起的

下面是我的基本express后端，让您了解我的资产和文件是如何提供的（我怀疑我有一个临时的大脑放屁，我的路径不正确）：

我的
index.html
文件位于
dist
目录中，该目录保存所有传输的javascript。以下是my System.config上的
程序包
属性：

packages: {
          "dist": {
            "main": "bootstrap",
            "format": "system",
            "defaultExtension": "js"
          }
        },

我的印象是，
dist
相对于
BASE\u URL
（在我的例子中，它只是
/
）标识文件夹，
main
属性标识文件名。因此，我认为通过调用
System.import（'app'）
，它将查看
dist
中的
app
文件夹，并找到
bootstrap.js
文件来引导我的angular2应用程序，但情况似乎并非如此。当我打开chrome控制台时，
bootstrap.js
不会出现在我的源代码中，所以我猜某个地方出现了路径错误，但我尝试了所有的变化，似乎都无法让它正常工作

任何帮助都将不胜感激，谢谢

更新：

这是我的
index.html
：
以下是提供内容的文件夹结构和服务器端代码：

当我检查网络选项卡以获取对
angular2/platform
中
browser.js
文件请求的响应时，我得到以下信息：

请求URL为
http://localhost:3000/jspm_packages/npm/angular2@2.0.0-beta.9/platform/browser.js

响应的内容类型为
内容类型：text/html；charset=utf-8
但是响应是我的index.html文件：（
而不是
System.import（'app'）
中的
app
，它应该是
dist
，如下所示：
System.import（'dist'）
，包的定义应该是：

packages: {
    "dist": {
      "main": "app/bootstrap",
      "format": "system",
      "defaultExtension": "js"
    }
}

packages: {
    "app": {
      "main": "bootstrap",
      "format": "system",
      "defaultExtension": "js"
    }
}

更新

由于您的
index.html
与
app
与
dist
位于同一文件夹中，因此在包定义中不需要
dist

你的定义应该是：

packages: {
    "dist": {
      "main": "app/bootstrap",
      "format": "system",
      "defaultExtension": "js"
    }
}

packages: {
    "app": {
      "main": "bootstrap",
      "format": "system",
      "defaultExtension": "js"
    }
}

和进口，如：

System.import（'app'）

更新

我试图复制您的设置，以下是我发现的问题：

在后端代码中：

您没有在
dist
中提供文件。该行已被注释掉。这样，对
app/*
的任何请求都将被转发到
index.html
，因为您的
app.get（'*'，…）

您可以取消对原始行的注释：

app.use（'/dist'，express.static（'dist'）；


或

app.use（'/app'，express.static（'dist/app'））

取决于您选择哪一个，包
对象将不同

我将使用后者，
app.use（'/app'，express.static（'dist/app'））
。对我来说，从请求中隐藏
dist
只会让我感觉更糟

还有，检查一下

包定义将是：

  packages: {
    "app": {
      "main": "bootstrap",
      //"format": "system",  // this was causing the main issue 
      format:"register",
      "defaultExtension": "js"
    }
  },

最后：

System.import('app')

更新

最后一个问题是关于行
“angular2”：“npm:angular2@2.0.0-beta.9“
：

这是由
server/index.js
中的以下两行引起的：

app.use(express.static('jspm_packages'));
app.use(express.static('node_modules'));

问题是
jspm_包
和
node_模块
中的所有内容都将直接从服务器提供服务。因此，如果您尝试访问：
http://localhost:3000/angular2
它将从
节点\u模块提供服务


如果您尝试访问：
http://localhost:3000/npm/angular2@2.0.0-beta.9
它将从
jspm_软件包
提供。因此，当您有以下线路时：

paths: {
  ...
  "npm:*": "jspm_packages/npm/*"
},
map:{
  `"angular2": "npm:angular2@2.0.0-beta.9"`
}

对
angular2
的每个请求都将转换为：
jspm\u包/npm/angular2@2.0.0-beta.9
。但它应该是
/npm/angular2@2.0.0-beta.9

当您删除“angular2”：“npm:angular2@2.0.0-beta.9“

因为

angular2

现在将从

节点模块内部提供服务

因此，解决方案是将
服务器/index.js
更改为：

app.use('jspm_packages',express.static('jspm_packages'));
app.use('node_modules',express.static('node_modules'));

另外，
index.html
中的脚本标记现在应该是：

<script src="jspm_packages/npm/angular2@2.0.0-beta.9/bundles/angular2-polyfills.min.js"></script>
<script src="jspm_packages/system.js"></script>


而不是
系统中的
app
。导入（'app'）
应该是
dist
，如下：
System.import（'dist'）
，您的包定义应该是：

packages: {
    "dist": {
      "main": "app/bootstrap",
      "format": "system",
      "defaultExtension": "js"
    }
}

packages: {
    "app": {
      "main": "bootstrap",
      "format": "system",
      "defaultExtension": "js"
    }
}

更新

由于您的
index.html
与
app
与
dist
位于同一文件夹中，因此在包定义中不需要
dist

你的定义应该是：

packages: {
    "dist": {
      "main": "app/bootstrap",
      "format": "system",
      "defaultExtension": "js"
    }
}

packages: {
    "app": {
      "main": "bootstrap",
      "format": "system",
      "defaultExtension": "js"
    }
}

和进口，如：

System.import（'app'）

更新

我试图复制您的设置，以下是我发现的问题：

在后端代码中：

您没有在
dist
中提供文件。该行已被注释掉。这样，对
app/*
的任何请求都将被转发到
index.html
，因为您的
app.get（'*'