小编典典

Python（Flask）服务Angular项目的index.html文件

python

有谁知道如何使用Flask服务Angular单页应用程序？

我在提供默认路由“ /”时遇到了麻烦，该默认路由应加载index.html和相关组件。这是我的Flask函数：

@app.route('/')
def hello_world():
    return send_file('templates/dist/templates/index.html')

当我访问localhost：5000时，我得到一个空的Chrome浏览器窗口：

以及Chrome开发者控制台中的以下错误：

这是在Chrome中显示的内容：

我希望这些错误是因为Flask不知道在哪里可以找到支持文件来渲染Angular组件。按照Angular快速入门教程中的指示，我的index.html大部分为空，其中app-
root作为HTML主体元素的占位符：

<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渲染页面？

阅读 208

2021-01-20

共1个答案

小编典典

为了简化设置，请考虑在构建过程中使用Angular
CLI将所有文件放置在分发目录中，即通过outputPath在angular.json中指定。您可以assets在构建期间使用angular.json部分移动您的Python文件。

angular.json

"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
以确保提供支持文件。

main.py

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

2021-01-20