Menu
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 404s?
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.
794
The history. pushState() method allows you to add an entry to the web browser's session history stack. Here's the syntax of the pushState() method: history.pushState(state, title, [,url])
The state object is a JavaScript object which is associated with the new history entry created by pushState() . Whenever the user navigates to the new state , a popstate event is fired, and the state property of the event contains a copy of the history entry's state object.
navigate and { replaceUrl: true } is it will register another navigation event. If you are listening to navigation events (eg, NavigationEnd ) and don't want two events to fire, location. replaceState will do the trick.
This API allows you to manipulate the browser history via script. You can change the URL in the browser without triggering a page refresh, and also listen for when a user presses the back button.
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;
history.pushState To use pushstate-server:
pushstate-server /home/jan/tour-of-heroes
history.pushState
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);
history.pushState
To use http-server:
node http-server/bin/http-server /home/jan/tour-of-heroes
history.pushState
To use live-server:
live-server --entry-file=index.html /home/jan/tour-of-heroes
history.pushState
To use ng serve:
ng serve -prod
or with ahead-of-time compilation:
ng serve -prod -aot
history.pushState
132
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With