Skip to content

Latest commit

 

History

History
43 lines (29 loc) · 2.12 KB

routing.md

File metadata and controls

43 lines (29 loc) · 2.12 KB
Raw

Browser routing

To allow navigation without triggering a server request, Angular now use by default the HTML5 pushState API enabling natural URL style (like localhost:4200/home/), in opposition to Angular 1 which used the hashbang hack routing style (like localhost:4200/#/home/).

This change has several consequences you should know of, be sure to read the browser URL styles notice to fully understand the differences between the two approaches.

In short:

  • It is only supported on modern browsers (IE10+), a polyfill is required for older browsers.

  • You have the option to perform server-side rendering later if you need to increase your app perceived performance.

  • You need to configure URL rewriting on your server so that all routes serve your index file.

It is still possible to revert to the hash strategy, but unless you have specific needs, you should stick with the default HTML5 routing mode.

Server configuration

To allow your angular application working properly as a Single Page Application (SPA) and allow bookmarking or refreshing any page, you need some configuration on your server, otherwise you will be running into troubles.

Note that during development, the live reload server already supports SPA mode.

The basic idea is simply to serve the index.html file for every request aimed at your application.

Here is an example on how to perform this on an Express NodeJS server:

// Put this in your `server.js` file, after your other rules (APIs, static files...)
app.get('/*', function (req, res) {
  res.sendFile(__dirname + '/index.html');
});

For other servers like Nginx or Apache, you may look for how to perform URL rewriting.