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 建议的方法。

flask 路线

@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://域名/登录
• https://域名/联系人
• https://域名/contacts/map

我尝试过的另一个配置是使用Blueprint，它具有相同的行为。我不明白为什么，仍然无法使用 /login 路径，因为在此版本中应该返回index.html 文件并且它应该在客户端工作，对吗？ (这里 Angular 应用程序构建为 static/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