【发布时间】：2016-04-04 07:26:47
【问题描述】：
在 Angular 1 取得巨大成功后，我开始使用 Angular 2。我遵循了 Quickstart 和 Tour of Heroes 教程，一切都像魅力一样。
lite 服务器启动，我看到tsc 在监视模式下运行，我什至看到 BrowserSync 已连接。太好了！
但是，我需要开始让事情变得更加真实。
我如何使用烧瓶开发或 gunicorn 服务器而不是使用 lite 服务器来完成所有这些工作，将初始 index.html 文件作为渲染的 jinja 模板提供服务？
给烧瓶开发服务器一个非常幼稚的尝试，我基本上将教程中示例 index.html 的内容复制到我的 jinja 模板中，然后运行npm run tsc:w，最后启动我的烧瓶开发服务器并希望最好.事情编译得很好。但是在浏览器中我看到了问题：
angular2-polyfills.js:332 Error: SyntaxError: Unexpected token <
at ZoneDelegate.invoke (http://127.0.0.1:5000/static/node_modules/angular2/bundles/angular2-polyfills.js:332:29)
at Zone.run (http://127.0.0.1:5000/static/node_modules/angular2/bundles/angular2-polyfills.js:227:44)
at http://127.0.0.1:5000/static/node_modules/angular2/bundles/angular2-polyfills.js:576:58
Evaluating http://127.0.0.1:5000/app/main.js
Error loading http://127.0.0.1:5000/app/main.js`
查看我看到的罪魁祸首 transpile main.js 文件：
(function(System, SystemJS, require) {<!doctype html>
<html>
<head lang='en'>
所以，是的，那是行不通的......显然我的接线是混乱的。
在 shims、polyfills、响应式扩展、systemjs、angular2 本身以及 tsc 和 lite 服务器中都有很多黑魔法。诚然，我还没有完成这一切，这需要时间，但我希望能很快让我的项目进入理智状态。
（我不介意在开发中使用 lite 服务器（BrowserSync 是一个不错的优势），只要我可以将其配置为代理将返回渲染 jinja 模板的真正的烧瓶服务器。）
更新
这是实际的模板索引文件，我做了一些小改动：
<!doctype html>
<html>
<head lang="en">
{% block head %}
<meta charset="utf-8">
<title>Angular 2 QuickStart</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<!-- 1. Load libraries -->
<!-- IE required polyfills, in this exact order -->
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<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>
<!-- 2. Configure SystemJS -->
<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('app/main')
.then(null, console.error.bind(console));
</script>
{% endblock %}
</head>
<!-- 3. Display the application -->
<body>
{% block content %}{% endblock %}
<my-app>Loading...</my-app>
<script>
(function(globals) {
this.MyConfig = {
staticDir: '{{ config["STATIC_DIR"] }}'
};
}(this));
</script>
</body>
</html>
【问题讨论】：
-
您最好提供模板的来源。
-
确定。好点...我在问题中添加了模板代码。
-
我很奇怪你在 main.js 中有 HTML。它应该在“localhost:NNN”的输出中或您用于提供文档的任何内容中。我猜它可以与响应式扩展相关联（它是 RreactiveJS 吗？）。尝试禁用它们？
-
对，这很奇怪。如果我只是注释掉 System.config() 和 System.import() 代码，那么 html 就会像你期望的那样得到服务，当然什么也不会发生。包含 HTML 的 main.js 文件——我真的不知道为什么，也不知道如何调试它。这个文件只是一些在文件系统上并不真正存在的虚无缥缈的文件，所以我不确定如何调试它是如何生成的。
标签： python node.js flask angular jinja2