当我刷新我的网站时,我得到了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服务器/index.html为任何传入请求提供服务的指令,无论路径是什么.

Answer 2

我认为你使用Angular2路由的默认模式(即HTML5LocationStrategy).在这种情况下,您需要在Web服务器上进行一些配置,以便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}
]);

在这种情况下,当您刷新页面时,它将再次显示.

希望它对你有帮助,蒂埃里

Answer 3

我在制作上遇到了同样的问题.以下步骤帮助我解决了问题.您必须在下一个根模块中添加:

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

它会切换到HashLocationStrategy. 角度文件

希望它会帮助别人!!

Answer 4

扩大所接受的答案，我想表明的是，重写规则去内的托管规则。在firebase.json中

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

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

此外，我也被这个周围的井号（＃）问题所困扰。我发现这不适用于新的Angular。在firebase.json中进行这些小的更改，重建，发布到firebase，然后使用clear-cache进行刷新页面可立即解决我的404问题，而无需在URL中使用散列。