Angular 2 Firebase Hosting appears to require the hash marking

Question

How can I configure a normal URL for my routes using Angular 2 and Firebase Hosting?

example route: https://mywebsite.com/privacy-policy

I tried loading my site to Firebase hosting with routes defined this way, but I could not navigate to my routes.

My workaround was to introduce the hash mark strategy for routes something like the following-

@NgModule({
    declarations: [...
    ],
    imports: [
        ...,
        RouterModule.forRoot([
            {path: 'privacy-policy', component: PrivacyPolicyComponent},
            .....
            {path: '**', component: PageNotFoundComponent}
        ])
    ],
    providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}, ...],
    bootstrap: [AppComponent]
})

Answer 1

You have to setup your firebase project to forward every request to your index.html.

During firebase init you got asked if you want to redirect all requests, maybe you answered with no..

add this to your firebase.json

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