当我刷新我的网站时，我得到一个 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

我认为您使用的是 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}
]);

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

希望对你有帮助，蒂埃里

Answer 2

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

从那里开始：

Use a rewrite when you want to show the same content for multiple URLs. Rewrites are particularly useful with pattern matching, as you can accept any URL that matches the pattern and let the client-side code decide what to display.

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

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

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

Answer 3

我在制作时遇到了同样的问题。以下步骤帮助我解决了问题。接下来你必须在你的根模块中添加：

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

它会切换到 HashLocationStrategy。 Angular documentatation

希望对大家有所帮助！！

Answer 4

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

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

Firebase 也有一个 updated docs page 以上示例的来源。

另外，我被围绕这个的井号 (#) 问题搞糊涂了。我发现这不适用于新 Angular。在 firebase.json 中进行这些小更改、重建、发布到 firebase，然后使用清除缓存刷新页面立即解决了我的 404 问题，URL.[=12 中的哈希不需要解决方法=]

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

When I refresh my website I get a 404. This is with Angular2 and firebase

firebase

typescript

firebase-security

firebase-hosting

angular