Configuring HTML 5 mode Permalink to "Configuring HTML 5 mode"

Tip submitted by @brevleq and updated by @wmarques

HTML 5 Mode has been added to the generator since this pull request #9098, so you don’t need to do any specific configuration anymore! Permalink to "HTML 5 Mode has been added to the generator since this pull request #9098, so you don’t need to do any specific configuration anymore!"

As you may noticed, AngularJS uses a “#” in it’s urls. HTML5Mode of AngularJS removes these “#” from URL.

Activate HTML 5 Mode Permalink to "Activate HTML 5 Mode"

Create html5.mode.config.js file in webapp/app/blocks/config/ directory:

(function() {
  'use strict';

  angular
    .module('<YourAppName>')
    .config(html5ModeConfig);

  html5ModeConfig.$inject = ['$locationProvider'];

  function html5ModeConfig($locationProvider) {
    $locationProvider.html5Mode({ enabled: true, requireBase: true });
  }
})();

Then open index.html and add this line in head tag:

<base href="/">

Redirection filter Permalink to "Redirection filter"

Now, to have relative paths links working correctly (ex. activation link sent to user e-mail) we will create a controller to forward the URI to index.html:

@Controller
public class AngularJsForwardController {
    @RequestMapping(value = "/**/{[path:[^\\.]*}")
    public String redirect() {
        return "forward:/";
    }
}

Please note that this can cause conflicts with Spring actuators URLs.

That’s why you have to edit urls of the metric.js and health.js. First, open webapp\app\admin\health\health.js and change:

url: '/health' -> url: '/apphealth'

Then do the same with webapp\app\admin\metrics\metrics.js:

url: '/metrics' -> url: '/appmetrics'

Then if you use gulp , you must to edit the file gulp\serve.js and replace proxyRoutes variable by:

var proxyRoutes = [
    '/'
];

Finally, to make the home link in the navigation bar work, open webapp\app\layouts\navbar\navbar.html and change:

<a class="navbar-brand" href="#/"> -> <a class="navbar-brand" href="/">