Python (Flask), обслуживающий файл index.html проекта Angular - PullRequest
Новая
       25

Python (Flask), обслуживающий файл index.html проекта Angular

0 голосов
/ 18 декабря 2018

Кто-нибудь знает, как обслуживать одностраничное приложение Angular с помощью Flask?

У меня проблемы с обслуживанием маршрута по умолчанию, '/', который должен загружать index.html и связанные компоненты.Вот моя функция Flask: 

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

Когда я захожу на localhost: 5000, я получаю пустое окно браузера Chrome:

Empty Chrome window with Angular / Flask

и следующие ошибки в консоли разработчика Chrome:

enter image description here

Вот что должно появиться в Chrome:

enter image description here

Я ожидаю, что ошибки в том, что Flask не знает, где найти вспомогательные файлы для рендеринга компонентов Angular.Как указано в кратком руководстве по Angular, мой index.html в основном пуст, с app-root в качестве заполнителя для HTML-элемента body: 

<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 отображал страницу

Ответы [ 2 ]

0 голосов
/ 18 декабря 2018

Чтобы упростить настройку, рассмотрите возможность использования Angular CLI , чтобы поместить все файлы в каталог дистрибутива во время процесса сборки, т. Е. Указав outputPath в angular.json.Вы можете использовать раздел angular.json assets для перемещения файлов 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
0 голосов
/ 18 декабря 2018

Как уже упоминалось в Flask docs :

Просто создайте папку с именем static в вашем пакете или рядом с вашим модулем, и она будет доступна в / static в приложении.

Итак, если вы используете шаблон в: 

templates/dist/templates/index.html
static/ # set static folder there

Или, в зависимости от того, как ваше приложение отсортировано: 

templates/dist/static/ # set static folder there

Посмотрите накак они сортируют приложение в документах: 

/application.py
/templates
    /hello.html

или если вы используете папки модулей: 

/application
    /__init__.py
    /templates
        /hello.html
...