如何将angular2与jinja2模板和flas结合起来问题的回答

如何将angular2与jinja2模板和flas结合起来

回答此问题可获得 20 贡献值，回答如果被采纳可获得 50 分。

<p>在Angular 1取得很大成功后，我开始使用Angular 2。我学习了<a href="https://angular.io/docs/ts/latest/quickstart.html" rel="nofollow">Quickstart</a>和<a href="https://angular.io/docs/ts/latest/tutorial/" rel="nofollow">Tour of Heroes</a>两门教程，一切都很有魅力。</p> <p>lite服务器启动了，我看到<code>tsc</code>在监视模式下运行，我甚至看到BrowserSync连接起来了。伟大的！</p> <p>然而，我需要开始让事情变得更真实一些。</p> <p><strong><em>如何使用flask dev或gunicorn服务器（将初始index.html文件作为呈现的jinja模板）来完成所有这些工作，而不是使用lite服务器？</em></strong></p> <p>让flask dev服务器进行一次非常频繁的尝试，我基本上是将教程中的example index.html的内容复制到我的jinja模板中，然后运行<code>npm run tsc:w</code>，最后启动flask dev服务器，希望一切顺利。一切都很顺利。但在浏览器中我看到了一些问题：</p> <pre><code>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` </code></pre> <p>查看罪犯transpile main.js文件，我看到：</p> <pre><code>(function(System, SystemJS, require) {<!doctype html> <html> <head lang='en'> </code></pre> <p>所以，是的，那不管用…很明显我的线路乱七八糟。</p> <p>填隙片、polyfill、reactive extensions、systemjs、angular2本身都有很多黑色魔法，然后加入tsc和lite服务器。诚然，我还没有把这些都搞定，这需要时间，但我希望我的项目能很快进入正常状态。</p> <p>（我不介意在开发中使用lite服务器（BrowserSync是一个不错的额外功能），只要我可以将其配置为代理真正的flask服务器，它将返回render jinja模板）</p> <p><strong>更新</strong></p> <p>下面是实际的模板索引文件，其中包含我所做的一些小更改：</p> <pre><code><!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">   <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>  <script> System.config({ packages: { app: { format: 'register', defaultExtension: 'js' } } }); System.import('app/main') .then(null, console.error.bind(console)); </script> {% endblock %} </head>  <body> {% block content %}{% endblock %} <my-app>Loading...</my-app> <script> (function(globals) { this.MyConfig = { staticDir: '{{ config["STATIC_DIR"] }}' }; }(this)); </script> </body> </html> </code></pre>

0 条评论
分类：Python问答

默认排序时间排序

1 个回答

匿名 1天前

　擅长：python、mysql、java

如何将angular2与jinja2模板和flas结合起来

1 个回答

相关Python问题