问题描述
有人知道如何使用Flask服务Angular单页应用程序吗?
Does anyone know how to serve an Angular single page application using Flask?
我在使用默认路由"/"时遇到了麻烦，该默认路由应加载index.html及其相关组件.这是我的Flask函数:
I'm having trouble serving the default route, '/', which should load index.html and the associated components. Here's my Flask function:
@app.route('/')
def hello_world():
return send_file('templates/dist/templates/index.html')
当我访问localhost:5000时，我得到一个空的Chrome浏览器窗口:
When I visit localhost:5000, I get an empty Chrome browser window:
以及Chrome开发者控制台中的以下错误:
and the following errors in Chrome's dev console:
这是在Chrome中显示的内容:
This is what should appear in Chrome:
我希望出现错误是因为Flask不知道在哪里可以找到支持文件来渲染Angular组件.按照Angular快速入门教程中的指示，我的index.html大部分为空，其中app-root作为HTML主体元素的占位符:
I expect the errors are because Flask doesn't know where to find the supporting files to render the Angular components. As instructed in Angular's quickstart tutorial, my index.html is mostly empty, with app-root as a placeholder for the HTML body element:
<body>
<app-root></app-root>
<script type="text/javascript" src="runtime.js"></script><script type="text/javascript" src="polyfills.js"></script><script type="text/javascript" src="styles.js"></script><script type="text/javascript" src="vendor.js"></script><script type="text/javascript" src="main.js"></script></body>
有人知道如何告诉Flask让Angular渲染页面吗?
Does anyone know how to tell Flask to let Angular render a page?
推荐答案
为简化设置，请考虑使用 Angular CLI 在构建过程中将所有文件放置在分发目录中，即通过在angular.json中指定outputPath.您可以使用angular.json assets部分在构建过程中移动Python文件.
To simplify the setup, consider using Angular CLI to place all of the files in a distribution directory during the build process, i.e., by specifying the outputPath in angular.json. You can use the angular.json assets section to move your Python files during the build.
"your-project": {
"root": "your-project-directory",
"sourceRoot": "your-project-directory/src",
"projectType": "application",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist",
"index": "your-project-directory/src/index.html",
"main": "your-project-directory/src/main.ts",
...
"assets": [
{
"glob": "**/*",
"input": "your-project-directory/src/assets/",
"output": "assets"
},
{
"glob": "**/*",
"input": "your-project-directory/src/python/",
"output": "."
}
在dist目录的顶层，将main.py与基本的Flask设置以及index.html一起放置.注意 static_proxy 以确保提供支持文件.
In the top level of the dist directory, place your main.py with the basic Flask setup along with index.html. Note the static_proxy to ensure that supporting files are served.
from flask import Flask, send_from_directory
app = Flask(__name__)
@app.route('/<path:path>', methods=['GET'])
def static_proxy(path):
return send_from_directory('./', path)
@app.route('/')
def root():
return send_from_directory('./', 'index.html')
if __name__ == '__main__':
# This is used when running locally only. When deploying use a webserver process
# such as Gunicorn to serve the app.
app.run(host='127.0.0.1', port=8080, debug=True)
@app.errorhandler(500)
def server_error(e):
return 'An internal error occurred [main.py] %s' % e, 500
这篇关于Python(Flask)服务Angular项目的index.html文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！