带有 Angular 6 的 Firebase 不会重定向到 index.html答案

【问题标题】：Firebase with Angular 6 does not redirect to index.html带有 Angular 6 的 Firebase 不会重定向到 index.html
【发布时间】：2026-01-05 15:05:02
【问题描述】：

我有一个 Angular 6 应用程序部署到 Firebase，但是，当我转到已将应用程序部署到的 url 时，它不会重定向到 index.html。它只显示查看文档页面。

但是，如果我最后用 /index.html 键入地址，它就可以完美运行。

这是我的 firebase json：

{
  "hosting": {
    "public": "dist",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

这是我的角度路由：

const appRoutes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'add-recipe', component: AddrecipeComponent },
  { path: 'edit-recipe/:id', component: EditrecipeComponent },
  { path: 'recipe-detail/:id',      component: RecipedetailComponent },
  { path: 'shopping-list',      component: ShoppinglistComponent },
  { path: '',
    redirectTo: '/home',
    pathMatch: 'full'
  },
  { path: '**', component: HomeComponent }
];

在我的 index.html 文件中，这是我的基本 href：

<base href="/">

在配置过程中，我勾选了这是一个单页应用程序的选项。

感谢您的帮助。

编辑：当我用 localhost 测试它时，它完美地重定向。

【问题讨论】：

标签： angular firebase routing firebase-hosting

【解决方案1】：

redirectTo 应该具有 route 的值，即带有“/”的 path。

将redirectTo: 'home', 更改为redirectTo: '/home',

另外，我猜路由配置中的最后两个部分是多余的。请将其更改为以下内容：

const appRoutes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'add-recipe', component: AddrecipeComponent },
  { path: 'edit-recipe/:id', component: EditrecipeComponent },
  { path: 'recipe-detail/:id',      component: RecipedetailComponent },
  { path: 'shopping-list',      component: ShoppinglistComponent },
  { path: '**', redirectTo: '/home' }
];

【讨论】：

这是一个公平的观点，我已经改变了它应该是这样的，但不幸的是它并没有解决我的问题。
请更新问题以及修复。另外，您对firebase json 进行了任何更改吗？
我更新了问题，但没有对我的 firebase.json 进行任何更改
定义重定向路径而不是组件解决了我的问题。谢谢。
很高兴我能帮上忙！

【解决方案2】：

遇到此问题的任何人的解决方案：HomeComponent 在 appRoutes 中定义了两次，虽然 localhost 没有问题，但 Firebase 做到了。

根据Angular documentation，您不应该定义重复的路由。

为了简单地解决问题，我删除了该行

{ path: 'home', component: HomeComponent },

它使问题消失了。

解决此问题的另一种方法是接受的答案，这实际上是一个更好的解决方案。

【讨论】：