Angular-cli Firebase hosting Angular 2 router does not work

Question

I am trying to host an angular 2 application (created using angular cli) with Firebase, but my routes do not work.

I created a project with angular 2 and typescript for the site I'm working on, where I need a static privacy policy page.

When i do

ng serve 

and go to http: // localhost: 4200 / privacy-policy in my browser. I get the content that I expect.

Here is the code recommended on the angular 2 route page -

 @NgModule({ declarations: [ AppComponent, HomeComponent, TermsOfServiceComponent, PrivacyPolicyComponent, PageNotFoundComponent ], imports: [ AlertModule, BrowserModule, FormsModule, HttpModule, RouterModule.forRoot([ {path: 'privacy-policy', component: PrivacyPolicyComponent}, {path: 'terms-of-service', component: TermsOfServiceComponent}, {path: '', component: HomeComponent}, {path: '**', component: PageNotFoundComponent} ]) ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } 

I set up Firebase hosting with my project, here is my configuration file -

 { "database": { "rules": "database.rules.json" }, "hosting": { "public": "dist" } } 

For deployment, I ran

 ng build --prod firebase deploy 

When I go to https://MY-APP.firebaseapp.com/ the application loads fine for the default route.

However, when I try to go to https://MY-APP.firebaseapp.com/privacy-policy I get 404.

I would expect this to work the same way as with ng.

Any help would be greatly appreciated.

Answer 1

In your app.module.ts file app.module.ts just add the following things:

announce

 import { LocationStrategy, HashLocationStrategy} from '@angular/common'; 

and in providers add the following

  @NgModule({ declarations: [...], imports:[...], providers:[..,{ provide: LocationStrategy, useClass: HashLocationStrategy },..] ..., }) 

Hope this solves your problem.

And, if possible, save your routes in a separate file.

Greetings

Answer 2

Late answer, but since I ran into the same problem today when I deployed my application to Firebase, here is a quick solution for it:

In your firebase.json file, update your hosting key with the rewrite rules:

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

Answer 3

Open firebase.json

if you have this:

  "ignore": [ "firebase.json", "**/.*", "**/node_modules/**" ] 

delete line ** /. *

So you have this:

 "ignore": [ "firebase.json", "**/node_modules/**" ] 

left me with this and worked

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

Answer 4

I'm on Angular 8 and it worked for me

ng build --prod firebase deploy

Also my firebase.json file looks like this:

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

In dist / crm, crm is the name of the project folder. I hope this helps.