Angular：如何在 Flask 上服务并路由到不同的端点/路径？

Question

我正在尝试制作一个与 Flask 一起服务的 Angular 应用程序来加载 Angular 应用程序登录页面。仅使用 https://domainname/ 工作正常，但我无法路由到 https://domainname/login。

重现步骤：

• 清除浏览器缓存
• 打开新标签并导航到https://domainname/login
• 返回 404

最初我使用了另一种解决方案，但在尝试的过程中，我最终采用了 Stack Overflow 问题 Python (Flask) serving Angular project's index.html file 建议的方法

烧瓶路线

@app.route('/<path:path>', methods=['GET'])
def static_proxy(path):
  return send_from_directory('./dist/', path)


@app.route('/')
def root():
  return send_from_directory('./dist/', 'index.html')

Angular 应用程序的生产版本直接位于dist 文件夹中。 https://domainname/ 请求到达第一条路线，实际上我看不到第二条路线在工作。因此，当我输入https://domainname/login 时，它会到达第一条路线，当然它会返回404，因为“dist”文件夹中没有名称为 login 的文件。所以问题是，如何路由到如下路径：

• https://domainname/login
• https://domainname/contacts
• https://domainname/contacts/map

我尝试过的另一个配置，它具有相同的行为，使用Blueprint。我不明白为什么，仍然不能使用 /login 路径，因为在这个版本中应该返回 index.html 文件并且它应该在客户端工作，对吗？ （这里 Angular 应用程序构建为静态/dist）

main.py
from app.api_default import api as default_blueprint
app.register_blueprint(default_blueprint)

...

app/api_default/__init__.py
STATIC_FOLDER = os.path.join(os.pardir, 'static/dist')
api = Blueprint('default', __name__, static_folder=STATIC_FOLDER, static_url_path='')
from . import routes

...

app/api_default/routes.py

@api.route('/', defaults={'path': ''})
@api.route('/<path:path>')
def route_path(path):
  return api.send_static_file('index.html')


@api.route('/')
def home_paths():
  return api.send_static_file('index.html')

Answer 1

Angular 应用程序是单页应用程序 (SPA)。 SPA 是一种 Web 应用程序或网站，它通过动态重写当前页面而不是从服务器加载整个新页面来与用户交互 [1]。

一旦您从 Flask 成功地提供了 index.html 页面并加载了 Angular 应用程序，路由将由 Angular Router 处理。

见Routing & Navigation