Question

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

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

2 个答案: