When I refresh my website I get a 404. This is with Angular2 and firebase

Question

When I refresh my website I get a 404. This is with Angular2, typescript and firebase.

I've deployed to firebaseapp with my Angular2 app.

Routes seem to change fine but when I refresh the browser it redirects me to 404 page.

When I refresh locally this doesn't happen.

Am I missing any route settings or Firebase settings?

This is my firebase.json file:

 {
   "firebase": "test",
   "public": "src",
   "ignore": [
     "firebase.json",
     "**/.*",
     "**/node_modules/**"
   ]
 }

Possible duplicate of [Angular 2 : 404 error occur when i refresh through Browser](http://stackoverflow.com/questions/35284988/angular-2-404-error-occur-when-i-refresh-through-browser) — Jp_, Mar 04 '16 at 12:53
i dont get 404 when page is refreshed when hosted in firebase! Are u using the latest Angular dependancies ? — Ichorville, Aug 30 '17 at 11:18

Frank van Puffelen · Accepted Answer · 2019-07-17T12:58:52.837

49

For Firebase Hosting the documentation on redirects and rewrites is here: https://www.firebase.com/docs/hosting/guide/url-redirects-rewrites.html

From there:

Use a rewrite when you want to show the same content for multiple URLs. Rewrites are particularly useful with pattern matching, as you can accept any URL that matches the pattern and let the client-side code decide what to display.

You're likely looking for the first rewrite sample on that page:

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

This is an instruction for the web server to serve /index.html for any incoming request, no matter what the path is.

edited Jul 17 '19 at 12:58

answered Dec 22 '15 at 14:29

Frank van Puffelen

565,676
79
828
807

@AngularM or anyone who understand how to solve the problem will they please provide the working example of removing the procedure of `#` from the URL ? – Pardeep Jain Jan 30 '16 at 18:25
the pound sign (hashtag) can be removed using $locationProvider as seen here https://scotch.io/tutorials/pretty-urls-in-angularjs-removing-the-hashtag – Felipe Oct 25 '16 at 00:53
You missed the starting " at "rewrites". Thx for the answer! – Eneko Jul 17 '19 at 09:47
you have to add above code in firebase.json, so it will looke like this-> { "hosting": { "public": "dist\\Login", "ignore": [ "firebase.json", "**/.*", "**/node_modules/**" ], "rewrites": [{ "source": "**", "destination": "/index.html" }] } } – Sagar M Sep 28 '20 at 05:29
{ "hosting": { "public": "dist/myproject", "ignore": [ "firebase.json", "**/.*", "**/node_modules/**" ], "rewrites": [ { "source": "**", "destination": "/index.html" } ] } } – Musa Baloyi Jun 15 '21 at 15:53
Tried this solution on Angular 12 and works better than the # useHash solution – Musa Baloyi Jun 15 '21 at 15:54

score 22 · Answer 2 · answered Jun 09 '18 at 02:20

Expanding on the accepted answer I wanted to show that the rewrites rules go inside of the hosting rules. in the firebase.json

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

Firebase also has an updated docs page where the above example is from.

Also, I was thrown off by the hash (#) question around this. I found that doesn't apply to the new Angular. Making these small changes in the firebase.json, rebuilding, publishing to firebase, and then doing a refresh page with clear-cache immediately resolved my 404 issue with no workarounds required for hashes in the URL.

score 19 · Answer 3 · answered Dec 22 '15 at 13:25

19

I think that you use the default mode of Angular2 routing (i.e. HTML5LocationStrategy). In this case, you need some configuration on your webserver to make load the index.html (your entry point file) for each URLs corresponding to each routes.

If you want to switch to the HashBang approach, you need to use this configuration:

import {bootstrap} from 'angular2/platform/browser';
import {provide} from 'angular2/core';
import {ROUTER_PROVIDERS} from 'angular2/router';
import {LocationStrategy, Location, HashLocationStrategy } from 'angular2/router'; 

import {MyApp} from './myapp';

bootstrap(MyApp, [
  ROUTER_PROVIDERS,
  provide(LocationStrategy, {useClass: HashLocationStrategy}
]);

In this case, when you refresh the page, it will be displayed again.

Hope it helps you, Thierry

answered Dec 22 '15 at 13:25

Thierry Templier

198,364
44
396
360

3

I dont want to hash approach – AngularM Dec 22 '15 at 14:02
1

So you need to configure your server side to serve the `index.html` file for each route you defined... – Thierry Templier Dec 22 '15 at 14:03
how i do that for firebase hosting? and with angular2? – AngularM Dec 22 '15 at 14:07
2

I think this link could help you: https://www.firebase.com/blog/2014-12-12-building-reviewable-with-firebase.html ;-) There is nothing to do within your Angular2 application... – Thierry Templier Dec 22 '15 at 14:09

score 16 · Answer 4 · edited May 30 '18 at 15:29

16

I had the same issue on production. The following steps helped me to fix the problem. You have to add in your root module next:

imports: [RouterModule.forRoot(routes, {useHash: true})]

and it will swich to HashLocationStrategy. Angular documentatation

Hope it will help someone !!

edited May 30 '18 at 15:29

geisterfurz007

5,292
5
33
54

answered May 30 '18 at 15:03

Viktor Hardubej

390
7
16

it did help me :) – Stefan P. Jun 08 '18 at 13:20
But, one problem. When I am refreshing in any path other than path '', it is redirecting to path ''. Like, on abc.xyz/#/dashboard, If I am refreshing it is going to abc.xyz/#/. Any Idea? I checked header, footer, app.component ngOnInit & Constructor no where I am calling to path and removing hash solving problem in localhost – Satish Patro Feb 27 '19 at 05:08

When I refresh my website I get a 404. This is with Angular2 and firebase

4 Answers4

Linked

Related