当我刷新我的网站时，我得到一个 404。这是使用 Angular2 和 firebase

Question

当我刷新我的网站时，我得到一个 404。这是使用 Angular2、typescript 和 firebase。

我已经使用我的 Angular2 应用程序部署到 firebaseapp。

路由似乎变化不大，但是当我刷新浏览器时，它会将我重定向到 404 页面。

当我在本地刷新时，这不会发生。

我是否缺少任何路由设置或 Firebase 设置？

这是我的 firebase.json 文件：

 {
   "firebase": "test",
   "public": "src",
   "ignore": [
     "firebase.json",
     "**/.*",
     "**/node_modules/**"
   ]
 }

Answer 1

对于 Firebase 托管，有关重定向和重写的文档在这里：https://www.firebase.com/docs/hosting/guide/url-redirects-rewrites.html

从那里：

如果您想为多个 URL 显示相同的内容，请使用重写。重写对于模式匹配特别有用，因为您可以接受任何与模式匹配的 URL，并让客户端代码决定要显示的内容。

您可能正在该页面上寻找第一个重写示例：

"rewrites": [ {
  "source": "**",
  "destination": "/index.html"
} ]

这是网络服务器为任何传入请求提供/index.html 的指令，无论路径是什么。

Answer 2

扩展已接受的答案，我想表明重写规则位于托管规则的内部。在 firebase.json 中

"hosting": {
  "rewrites": [ {
    "source": "**",
    "destination": "/index.html"
   } ]
}

Firebase 也有一个updated docs page，上面的示例来自该地址。

另外，我对这个问题的井号 (#) 感到厌烦。我发现这不适用于新的 Angular。在 firebase.json 中进行这些小的更改、重建、发布到 firebase，然后使用 clear-cache 进行刷新页面立即解决了我的 404 问题，无需解决 URL 中的哈希问题。

Answer 3

我在生产中遇到了同样的问题。 以下步骤帮助我解决了这个问题。 接下来您必须添加根模块：

imports: [RouterModule.forRoot(routes, {useHash: true})]

它会切换到 HashLocationStrategy。 Angular documentatation

希望对某人有所帮助！

Answer 4

我认为您使用 Angular2 路由的默认模式（即HTML5LocationStrategy）。在这种情况下，您需要在您的网络服务器上进行一些配置，以便为每个路由对应的每个 URL 加载 index.html（您的入口点文件）。

如果要切换到HashBang方式，需要使用这个配置：

import {bootstrap} from 'angular2/platform/browser';
import {provide} from 'angular2/core';
import {ROUTER_PROVIDERS} from 'angular2/router';
import {LocationStrategy, Location, HashLocationStrategy } from 'angular2/router'; 

import {MyApp} from './myapp';

bootstrap(MyApp, [
  ROUTER_PROVIDERS,
  provide(LocationStrategy, {useClass: HashLocationStrategy}
]);

在这种情况下，当你刷新页面时，它会再次显示。

希望对你有帮助 蒂埃里