Question

我正在尝试构建一个样板模板来使用express，angular 2，typescript，gulp和systemjs来引导角度2应用程序。出于某种原因，我的index.html文件无法识别我的jade文件。我的所有typescript和src都位于src。我正在使用gulp将打字稿从dist转换为node_modules，并在快递中提供来自jspm_packages和System.import的静态资源。但是当它最终到了调用System.import('app').catch(console.error.bind(console))时，就像这样： Error: SyntaxError: Unexpected token < Evaluating http://localhost:3000/app/bootstrap.js Error loading http://localhost:3000/app/bootstrap.js，我明白了：

angular2-polyfills.min.js

错误似乎是由const app = express(); app.use('/jspm_packages', express.static('jspm_packages')); app.use('/node_modules', express.static('node_modules')); app.get('*', function(req, res) { const file = fs.readFileSync('src/index.jade').toString(); const html = jade.render(file); return res.send(html); }); app.listen(process.env.PORT || 3000);引起的。

这是我的基本快速后端，让您了解我的资产和文件是如何提供的（我怀疑我有一个临时的脑筋，我的路径已关闭）：

index.html

我的dist文件位于packages，该目录包含所有已编译的javascript。这是我的System.config上的packages: { "dist": { "main": "bootstrap", "format": "system", "defaultExtension": "js" } },属性：

dist

我的印象是BASE_URL标识了相对于/的文件夹（在我的情况下只是main），而System.import('app')属性标识了文件名称。所以我认为通过调用app，它会查看dist内的bootstrap.js文件夹并查找bootstrap.js文件以引导我的angular2应用程序，但这似乎不是是这样的。当我打开我的Chrome控制台时，index.html没有显示在我的来源中，所以我猜测某处有路径错误，但我已经尝试过各种变化，似乎无法让它工作。< / p>

非常感谢任何帮助，谢谢。

更新

以下是我的browser.js：https://jsfiddle.net/r02r3jk3/ 以下是提供内容的文件夹结构和服务器端代码：https://jsfiddle.net/cejk0jw3/

当我在angular2/platform中检查网络标签以获取http://localhost:3000/jspm_packages/npm/angular2@2.0.0-beta.9/platform/browser.js文件请求的响应时，我得到以下信息：

请求网址为Content-Type:text/html; charset=utf-8

响应的内容类型为protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String line; StringBuffer jsonString = new StringBuffer(); String starttime = "2010-01-16T12:07:48"; String endtime = "2010-02-16T12:18:13"; try { URL url = new URL("http://localhost:9200/indexname/_search?filter_path=hits.hits._source&pretty=1&size=10000000"); String payload = "{\"query\":{\"filtered\":{\"filter\":{\"range\":{\"Date\":{\"lte\":\""+endtime+"\",\"gte\":\""+starttime+"\"}}}}},\"_source\":{\"include\":[\"ID\",\"Name\",\"Status\",\"Date\"]}}"; HttpURLConnection connection1 = (HttpURLConnection) url.openConnection(); connection1.setDoInput(true); connection1.setDoOutput(true); connection1.setRequestMethod("POST"); connection1.setRequestProperty("Accept", "application/json"); connection1.setRequestProperty("Content-Type", "application/json; charset=UTF-8"); OutputStreamWriter writer1 = new OutputStreamWriter(connection1.getOutputStream(), "UTF-8"); writer1.write(payload1); writer1.close(); BufferedReader br1 = new BufferedReader(new InputStreamReader(connection1.getInputStream())); while ((line = br1.readLine()) != null) { jsonString1.append(line); } br1.close(); connection1.disconnect(); } catch (Exception e) { throw new RuntimeException(e.getMessage()); } response.setContentType("text/html"); PrintWriter out = response.getWriter(); out.print(jsonString); out.flush(); out.close(); RequestDispatcher dispatcher = request.getRequestDispatcher("index.jsp"); dispatcher.forward(request, response); }，但响应是我的index.html文件：（

Answer 1

而不是app中的System.import('app')应该是dist，如下所示：System.import('dist')，您的包定义应为：

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

<强>更新

由于您的index.html位于app为dist的同一文件夹中。然后，您的包定义中不需要dist。

您的定义应该是：

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

取决于你做的是哪一个，packages对象会有所不同。

我会选择后者，app.use('/app',express.static('dist/app'))。自从我隐藏请求中的dist之后，它就变得更加充实了。

另外，请检查SystemJS module formats

包裹定义将是：

  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_packages和node_modules内的所有内容都将直接从服务器提供。因此，如果您尝试访问：http://localhost:3000/angular2，则会从node_modules投放如果您尝试访问：http://localhost:3000/npm/angular2@2.0.0-beta.9，则会从jspm_packages投放。所以，当你有线：

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

angular2的每个请求都将转换为：jspm_packages/npm/angular2@2.0.0-beta.9。但它应该只是/npm/angular2@2.0.0-beta.9。

当您移除"angular2": "npm:angular2@2.0.0-beta.9"时，它有效，因为angular2现在将从node_modules内部提供。

因此，解决方案是将您的server/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>

Answer 2

实际上，它取决于在构建应用程序时如何转换TypeScript文件：

如果每个TypeScript都有一个JS文件，则会在相应的文件中创建一个匿名模块（＆＃34; System.register（[＆＃39; import1＆＃39;]，...＆＃34;）。在这种情况下，模块由其名称和路径标识。
如果只为所有TypeScript文件获取一个JS文件（使用outFile选项），则在使用System.register函数时会显式定义模块名称（（＆＃34; System.register（＆＃39;模块名称＆＃ 39;，[＆＃39; import1＆＃39;]，...＆＃34;）。

在你的情况下，似乎你是第一种情况，所以你可以试试这个：

System.import('path/to/boot');

请注意，如果您的index.html文件位于dist文件夹中，则需要此级别的子文件夹用于JS编译文件。此子文件夹需要在＆＃34; packages＆＃34;中配置到SystemJS中。条目。

有关详细信息，请参阅此问题：

How do I actually deploy an Angular 2 + Typescript + systemjs app?

为什么我的angular 2应用程序不会引导？

2 个答案: