When I update my site, I get 404. This is with Angular2 and firebase

Question

When I update my site, I get 404. This is with Angular2, typescript and firebase.

I deployed firebaseapp using my Angular2 application.

The routes seem to change fine, but when I update my browser, it redirects me to 404 page.

When I update locally, this does not happen.

Am I missing route settings or Firebase settings?

This is my firebase.json file:

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

Answer 1

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

From there:

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

You are probably looking for the first rewriting example on this page:

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

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

Answer 2

I think you are using the default Angular2 routing mode (i.e. HTML5LocationStrategy ). In this case, you need some configuration on your web server to load index.html (entry point file) for each URL corresponding to each route.

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 this helps you, Thierry

Answer 3

I had the same problem in production. The following steps helped me solve the problem. You should add the following to your root module:

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

and this will go to HashLocationStrategy. Corner Documentation

Hope this helps someone !!

Answer 4

By sorting out the accepted answer, I wanted to show that the rewriting rules are part of the hosting rules. in firebase.json

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

Firebase also has an updated documentation page, from where the example above is given.

Also, I was confused by the hash (#) question about this. I found that this does not apply to the new Angular. Making these small changes to firebase.json, rebuilding, publishing to firebase and then refreshing the page with clearing the cache immediately resolved my 404 problem with no workarounds needed for hashes in the URL.