Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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/**"
   ]
 }
like image 689
AngularM Avatar asked Dec 22 '15 12:12

AngularM


People also ask

How do I fix a 404 error on a website?

Change the DNS servers used by your computer, but usually only if an entire website is giving you a 404 error, especially if the website is available to those on other networks (e.g., your mobile phone network or a friend in another city). 404s on an entire website isn't particularly common unless your ISP or government filters/censors websites.

Why am I getting 404 errors instead of redirects?

Another possibility is if a website has moved a page or resource but did so without redirecting the old URL to the new one. When that happens, you'll receive a 404 error instead of being automatically routed to the new page.

What does 404 not found mean?

A 404 error is an HTTP status code that means that the page you were trying to reach on a website couldn't be found on their server. 404 Not Found error messages are frequently customized by individual websites. You can see some of the more creative ones in our 20 Best 404 Error Pages Ever slideshow.

How to fix angular usehash is not working properly?

this likely can be fixed quickly by simply using the useHash: true flag. For some unknown reason angular does not default this setting to true. Make sure your app-routing-module.ts file contains useHash like this: @NgModule ( { imports: [RouterModule.forRoot (routes, { useHash: true })], exports: [RouterModule] })


3 Answers

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.

like image 191
Frank van Puffelen Avatar answered Oct 05 '22 02:10

Frank van Puffelen


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.

like image 35
SeanMC Avatar answered Oct 05 '22 01:10

SeanMC


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

like image 21
Thierry Templier Avatar answered Oct 05 '22 00:10

Thierry Templier