CODEWITHSUNDEEP
angularfirebasefirebase-hosting
Philip Brack
Philip Brack

Reputation: 1328

Angular 2 Firebase Hosting appears to require the hash marking

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

Upvotes: 2

Views: 688

Answers (1)

slaesh
slaesh

Reputation: 16917

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

Upvotes: 2

Related Questions