Question

当我刷新我的网站时，我得到了404.这是使用Angular2，打字稿和firebase。

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

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

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

我是否遗漏了任何路线设置或Firebase设置？

这是我的firebase.json文件：

server {
listen 80;
server_name localhost;

root /home/user/app/public;

try_files $uri/index.html $uri @app;

location @app {
    proxy_pass http://app;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $http_host;
    proxy_redirect off;
}

error_page 500 502 503 504 /500.html;
client_max_body_size 4G;
keepalive_timeout 10;
}

Answer 1

我认为您使用Angular2路由的默认模式（即HTML5LocationStrategy）。在这种情况下，您需要在Web服务器上进行一些配置，以便为每个路由对应的每个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

从那里：

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

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

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，然后使用clear-cache执行刷新页面，立即解决了我的404问题，并且没有URL中哈希所需的变通方法。

当我刷新我的网站时，我得到了404.这是使用Angular2和firebase

4 个答案: