Firebase with Angular 6 does not redirect to index.html

Question

I have an Angular 6 application deployed to Firebase, however, when I go to the url which I have deployed my application to, it does not redirect to index.html. It only shows the view documentation page.

However, if I type the address with /index.html in the end, it works flawlessly.

Here is my firebase json:

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

Here is my angular routing:

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

And in my index.html file this is my base href:

<base href="/">

During the configuration, I checked the option that this is a single page application.

Thank you for your help.

EDIT: when I test it with localhost, it redirects flawlessly.

Answer 1

redirectTo should have the value of a route i.e. path with a '/'.

Change redirectTo: 'home', to redirectTo: '/home',

Also, I guess the last two segments in the route config are redundant. Please change it to the following:

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