Search code examples
angularangular2-routingangular2-cli

Configure history.pushState for Angular 2

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.

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