Configure history.pushState for Angular 2
angular, angular2-cli, angular2-routing
Solution
nginx
To use nginx:
`/etc/nginx/ngin.conf`
location / {
root /home/jan/tour-of-heroes/;
index index.html index.htm;
}
error_page 404 =200 /index.html;
- supports `history.pushState`
- production HTTP server
pushstate-server
To use pushstate-server:
pushstate-server /home/jan/tour-of-heroes
- supports `history.pushState`
- production HTTP server
express
To use express:
node express.js
where `express.js`:
var express = require('express'),
path = require('path'),
port = process.env.PORT || 8083,
app = express();
app.use(express.static(__dirname ));
app.get('*', function(request, response){
response.sendFile(path.join(__dirname + '/index.html'));
});
app.listen(port);
- supports `history.pushState`
- production HTTP server
http-server
To use http-server:
node http-server/bin/http-server /home/jan/tour-of-heroes
- no `history.pushState`
- production HTTP server
live-server
To use live-server:
live-server --entry-file=index.html /home/jan/tour-of-heroes
- supports `history.pushState`
- development HTTP server
ng serve
To use ng serve:
ng serve -prod
or with ahead-of-time compilation:
ng serve -prod -aot
- supports `history.pushState`
- production application build
- development HTTP server
Problem
My Angular 2 application uses the default HTML 5 `history.pushState` location strategy. How do I configure a server with `history.pushState` so browser refreshes and browser URLs do not generate `404`s? For example, the Tour of Heroes application has a few different application routes like: ``` http://localhost:8080/dashboard http://localhost:8080/heroes http://localhost:8080/detail/13 ``` If you hit refresh on one of these routes, or type one of the URLs, you'll get `404` since `/detail/13` is an application route, not a server resource. I've configured the location strategy at the top of the `head` in my `index.html`: ``` <!doctype html> <html> <head> <base href="/"> <meta charset="utf-8"> <title>Tour of Heroes</title> ``` but how should a server be configured so it sends all URLs to my application instead of generating a `404`? Note: This question is the complement to the questions Angular 2 : 404 error occur when i refresh through Browser and Angular 2.0 router not working on reloading the browser asking how to address this problem. For Firebase, there's this: When I refresh my website I get a 404. This is with Angular2 and firebase and for Apache there's this: htaccess redirect for Angular routes.