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

Answer 2

The solution to the problem for anyone who comes across this issue: HomeComponent was defined twice in appRoutes and although localhost has no problem with it, Firebase did.

According to Angular documentation, you should not have duplicate routes defined.

To simply solve the issue, I removed the line

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

and it made the problem disappear.

Another way to go by solving this issue is the accepted answer, which is actually a better solution.