在 Google App Engine 上找不到 Angular 6 路由

Question

我在 Google App Engine 上部署了一个 Angular 6 应用程序。 app.yaml 配置如下所示：

runtime: python27
api_version: 1
threadsafe: true

skip_files:
- (?!^dist)

handlers:
- url: /
  static_files: dist/index.html
  upload: dist/index.html

- url: /(.*)
  static_files: dist/\1
  upload: dist/(.*)

一切正常，我可以访问所有内容，直到我在路由上重新加载页面或通过路由（例如 myapp.com/route）直接访问网站。这样做我会收到 The requested URL /route was not found on this server 错误消息。

Answer 1

编译和部署的 Angular 应用程序包含一个 index.html 以及几个资产，例如 JavaScript 文件。索引文件包含所有 JavaScript 文件。路由是基于 Angulars 路由器虚拟执行的，而不是基于实际文件。因此，您的配置无法解析/route 之类的路由。除了您的资产之外，您还必须将所有请求重定向/重写到您的index.html，以便通过您的 Angular 路由处理这些请求。

runtime: python27
api_version: 1
threadsafe: true

skip_files:
  - (?!^dist)

handlers:
  - url: /(.*\.(js|css|svg|png)(|\.map))$
  static_files: dist/\1
  upload: dist/(.*)(|\.map)
  - url: /.*
  static_files: dist/index.html
  upload: dist/.*

如果您要提供更多文件，请调整正则表达式。

Answer 2

更新您的烧瓶服务器，以便“/”和“/route”都返回您的角度 index.html。这样，当 GAE/flask 返回时，angular 将处理路由以显示正确的内容。

Answer 3

页面刷新时显示 404 Not Found 的原因是所有 Angular2 路由都应通过 index.html 文件提供服务。

您可以通过添加具有以下内容的 .htaccess 文件（在 index.html 所在的同一目录中）来解决此问题。

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . index.html [L]
</IfModule>