当我刷新网站时，我收到 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"
} ]

这是 Web 服务器为任何传入请求提供服务的指令，无论路径是什么。

Answer 2

内部

。在 firebase.json 中 /index.html

Firebase 还有一个

更新的文档页面

，上面的示例来自其中。 此外，我对这个问题的哈希（#）问题感到困惑。我发现这不适用于新的 Angular。在 firebase.json 中进行这些小更改、重建、发布到 firebase，然后使用清除缓存刷新页面立即解决了我的 404 问题，无需解决 URL 中的哈希值问题。

Answer 3

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

）。在这种情况下，您需要在网络服务器上进行一些配置，以便为每个路由对应的每个 URL 加载

HTML5LocationStrategy

（您的入口点文件）。如果想切换到HashBang方式，需要使用这个配置：

index.html

这样的话，当你刷新页面时，就会再次显示。

希望对您有帮助， 蒂埃里

Answer 4

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}
]);

它将切换到 HashLocationStrategy。

Angular 文档

希望它能帮助别人！！