Angular 6 的 Firebase 不会重定向到 index.html

Question

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

但是，如果我在最后键入带有 /index.html 的地址，它会完美运行。

这是我的 firebase json：

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

这是我的 angular 路由：

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 测试它时，它完美地重定向。

Answer 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' }
];

Answer 2

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

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

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

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

这让问题消失了。

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

Angular 6 的 Firebase 不会重定向到 index.html

Firebase with Angular 6 does not redirect to index.html

routing

firebase

firebase-hosting

angular