los*_*rje 3 python jinja2 node.js flask angular
在Angular 1取得巨大成功后,我开始使用Angular 2.我遵循了Quickstart和Tour of Heroes教程,一切都像魅力一样.
Lite服务器开始启动,我看到tsc在监视模式下运行,我甚至看到BrowserSync被连接起来.大!
但是,我需要开始让事情变得更加现实.
而不是使用lite服务器,如何使用flask dev或gunicorn服务器将所有这些工作,将初始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'>
所以,是的,这不会起作用......显然我的布线是乱七八糟的.
垫片,polyfill,反应扩展,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>
我有同样的问题,这就是我如何解决它;
目录结构如下:
+ - MyAppName
+ - ServerApp
+ --- //...flask文件在这里
+ - ClientApp
+ --- node-modules
+ --- app
+ --- //...more node + angular application files
我.../client-app/...使用以下代码在URL中的flask应用程序中公开了ClientApp文件夹:
from flask import Flask, send_from_directory
import os
BASE_URL = os.path.abspath(os.path.dirname(__file__))
CLIENT_APP_FOLDER = os.path.join(BASE_URL, "ClientApp")
# This is required by zone.js as it need to access the
# "main.js" file in the "ClientApp\app" folder which it
# does by accessing "<your-site-path>/app/main.js"
@app.route('/app/<path:filename>')
def client_app_app_folder(filename):
return send_from_directory(os.path.join(CLIENT_APP_FOLDER, "app"), filename)
# Custom static data
@app.route('/client-app/<path:filename>')
def client_app_folder(filename):
return send_from_directory(CLIENT_APP_FOLDER, filename)
转到你的index.html文件(我把我放在那里,ServerApp\templates\index.html这样我就可以这样做render_template('index.html'))并让它看起来像这样:
<html>
<head>
<title>Angular 2 QuickStart</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="client-app/assets/css/style.css">
<!-- 1. Load libraries -->
<!-- Polyfill(s) for older browsers -->
<script src="client-app/node_modules/es6-shim/es6-shim.min.js"></script>
<script src="client-app/node_modules/zone.js/dist/zone.js"></script>
<script src="client-app/node_modules/reflect-metadata/Reflect.js"></script>
<script src="client-app/node_modules/systemjs/dist/system.src.js"></script>
<!-- 2. Configure SystemJS -->
<script src="client-app/systemjs.config.js"></script>
<script src=""></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
</body>
</html>
路径前面的'client-app'是我选择公开我的client_app_folder()函数的路径
配置客户端应用程序的包查找器以使用set route(在这种情况下为'client-app/...').我使用system.js,因此我的systemjs.config.js文件看起来像这样:
(function(global) {
// map tells the System loader where to look for things
var map = {
'app': 'client-app/app', // 'dist',
'rxjs': 'client-app/node_modules/rxjs',
'angular2-in-memory-web-api': 'client-app/node_modules/angular2-in-memory-web-api',
'@angular': 'client-app/node_modules/@angular'
};
// packages tells the System loader how to load when no filename and/or no extension
var packages = {
'app': { main: 'main.js', defaultExtension: 'js' },
'rxjs': { defaultExtension: 'js' },
'angular2-in-memory-web-api': { defaultExtension: 'js' },
};
var packageNames = [
'@angular/common',
'@angular/compiler',
'@angular/core',
'@angular/http',
'@angular/platform-browser',
'@angular/platform-browser-dynamic',
'@angular/router',
'@angular/router-deprecated',
'@angular/testing',
'@angular/upgrade',
];
// add package entries for angular packages in the form '@angular/common': { main: 'index.js', defaultExtension: 'js' }
packageNames.forEach(function(pkgName) {
packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
});
var config = {
map: map,
packages: packages
}
// filterSystemConfig - index.html's chance to modify config before we register it.
if (global.filterSystemConfig) { global.filterSystemConfig(config); }
System.config(config);
})(this);
我只修改了map变量
一帆风顺!
| 归档时间： |
|
| 查看次数： |
5947 次 |
| 最近记录： |