在 Firebase 上重新加载 Angular 页面时找不到页面

Posted 2023-02-22

【中文标题】在 Firebase 上重新加载 Angular 页面时找不到页面

【英文标题】：Page not found when reloading Angular page on Firebase

【发布时间】：2016-08-01 23:33:03

【问题描述】：

我已将我的 Angular 应用程序部署到 Firebase。我可以正常看到登录页面，但重新加载页面时出现以下错误：

This file does not exist and there was no index.html found in the current directory or 404.html in the root directory.

Why am I seeing this?

You may have deployed the wrong directory for your application. Check your firebase.json and make sure the public directory is pointing to a directory that contains an index.html file.
You can also add a 404.html in the root of your site to replace this page with a custom error page.

因此，正如错误提示，我检查了我的 firebase.json 文件并显示如下：

  "firebase": "******",
  "public": "dist",
  "ignore": [
    "firebase.json",
    "**/.*",
    "**/node_modules/**"
  ]

在这里你可以看到我的public 文件夹是我的dist 文件夹。这个dist 文件夹实际上是我在 gulp 构建所有文件时放置所有文件（css、js、html 和 index.html）的地方。文件夹结构如下所示：

dist
  css
  images
  js
  templates
  index.html

所以上面的目标文件夹确实有一个index.html 页面 - 那为什么我会收到这个错误？ Angular 应该介入并处理所有路由，但似乎并非如此。

编辑

【问题讨论】：

这里没有任何建议可以解决您的问题。一定有别的东西在起作用。您可以在部署中尝试 --debug 并准确查看正在上传哪些文件以及正在跳过哪些文件？

@Kato 我知道我上周问过这个问题，但你对这里发生的事情还有其他想法吗？

【参考方案1】：

在`firebase.json`，`hosting`部分添加`rewrites`

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

【参考方案2】：

如果您使用firebase-tools，您可以在问题处点击y（是）：

配置为单页应用（将所有 url 重写为 /index.html）？

【参考方案3】：

2018 年，遇到了同样的问题。 Katana24 给出了一个很好的答案，但从那以后，firebase 更新了一点。这是 Katana24 更新的答案：

firebase.json：

"functions": 
    "predeploy": [
        "npm --prefix \"%RESOURCE_DIR%\" run lint"
    ],
    "source": "functions"
,
"hosting": 
    "public": "dist/YOURAPPNAME",
    "ignore": [
        "firebase.json",
        "**/.*",
        "**/node_modules/**"
    ],
    "rewrites": [
            "source": "/public/**",
            "destination": "/public.html"
        ,
        
            "source": "**",
            "destination": "/index.html"
        
    ],
    "storage": 
        "rules": "storage.rules"
    

【参考方案4】：

我解决了这个问题——这个问题是由 Firebase（实际上是我认为的所有服务器）认为每个 Angular 状态都是一个应该包含其自己的 index.html 文件的文件夹引起的——显然情况并非如此。

需要做的是让它只引用文件夹根目录中的index.html。为此，您需要将 firebase.json 文件修改为以下内容：

  "firebase": "app-name",
  "public": "dist",
  "ignore": [
    "firebase.json",
    "**/.*",
    "**/node_modules/**"
  ],
  "rewrites": [
    "source": "/public/**",
    "destination": "/public.html"
  ,
  
    "source": "**",
    "destination": "/index.html"
  ]

这里的重要部分是重写和源对象。有关更多信息，请参阅firebase.json 解释页面：firebase.json

【讨论】：

你拯救了我的一天:)

@calistus 没问题