AngularJS AngularJS gotchas and traps Things to do when using html5Mode
Example
When using html5Mode([mode]) it is necessary that:
-
You specify the base URL for the application with a
<base href="">in the head of yourindex.html. -
It is important that the
basetag comes before any tags with url requests. Otherwise, this might result in this error -"Resource interpreted as stylesheet but transferred with MIME type text/html". For example:<head> <meta charset="utf-8"> <title>Job Seeker</title> <base href="/"> <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" /> <link rel="stylesheet" href="/styles/main.css"> </head> -
If you do no want to specify a
basetag, configure$locationProviderto not require abasetag by passing a definition object withrequireBase:falseto$locationProvider.html5Mode()like this:$locationProvider.html5Mode({ enabled: true, requireBase: false }); -
In order to support direct loading of HTML5 URLs, you need to enabler server-side URL rewriting. From AngularJS / Developer Guide / Using $location
Using this mode requires URL rewriting on server side, basically you have to rewrite all your links to entry point of your application (e.g.
index.html). Requiring a<base>tag is also important for this case, as it allows Angular to differentiate between the part of the url that is the application base and the path that should be handled by the application.An excellent resource for request rewriting examples for various HTTP server implementations can be found in the ui-router FAQ - How to: Configure your server to work with html5Mode. For example, Apache
RewriteEngine on # Don't rewrite files or directories RewriteCond %{REQUEST_FILENAME} -f [OR] RewriteCond %{REQUEST_FILENAME} -d RewriteRule ^ - [L] # Rewrite everything else to index.html to allow html5 state links RewriteRule ^ index.html [L]nginx
server { server_name my-app; root /path/to/app; location / { try_files $uri $uri/ /index.html; } }Express
var express = require('express'); var app = express(); app.use('/js', express.static(__dirname + '/js')); app.use('/dist', express.static(__dirname + '/../dist')); app.use('/css', express.static(__dirname + '/css')); app.use('/partials', express.static(__dirname + '/partials')); app.all('/*', function(req, res, next) { // Just send the index.html for other files to support HTML5Mode res.sendFile('index.html', { root: __dirname }); }); app.listen(3006); //the port you want to use
