34

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

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

路线似乎改变得很好，但是当我刷新浏览器时，它会将我重定向到 404 页面。

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

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

这是我的 firebase.json 文件：

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

4 回答 4

45

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

从那里：

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

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

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

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

于 2015-12-22T14:29:37.620 回答
19

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

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

Firebase 还有一个更新的文档页面，上面的示例来自该页面。

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

于 2018-06-09T02:20:31.650 回答
18

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

如果要切换到 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}
]);

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

希望它可以帮助你，蒂埃里

于 2015-12-22T13:25:30.750 回答
14

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

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

它将切换到 HashLocationStrategy。 角度文档

希望它会帮助别人！

于 2018-05-30T15:03:02.473 回答