Jasper Blues Jasper Blues - 1 year ago 96
Javascript Question

Angular: HTML5 style URL is rendering with no stylesheet

I turned on HTML5 style URLs (no '#') in Angular like this:

enabled: true,
requireBase: true

And added a base tag:

<base href="/">

Now when I navigate to
it renders the page without any styles applied. See attached:

Missing CSS

However when I use the URL with a '#' the page renders correctly. Similarly, if I disable HTML5 style URLs, the page renders correctly.

Looks ok

I'm using ui-router, configured with:

/** @ngInject */
function routerConfig($stateProvider, $urlRouterProvider) {

.state('showProfile', {
url: '/show/:id',
templateUrl: 'app/profile/profile.html',
controller: 'ProfileController',
controllerAs: 'profileController'


CSS Injected via Gulp Task:

The CSS is injected via the Gulp task from this Yeoman Generator.

<!-- build:css({.tmp/serve,src}) styles/app.css -->
<!-- inject:css -->
<link rel="stylesheet" href="app/index.css">
<!-- endinject -->
<!-- endbuild -->

The task looks something like:

var injectFiles = gulp.src([
path.join(conf.paths.src, '/app/**/*.scss'),
path.join('!' + conf.paths.src, '/app/index.scss')
], { read: false });

var injectOptions = {
transform: function(filePath) {
filePath = filePath.replace(conf.paths.src + '/app/', '');
return '@import "' + filePath + '";';
starttag: '// injector',
endtag: '// endinjector',
addRootSlash: false


Why does this happen, and is there something I can do to fix it, other than not using HTML5 style URLs?

Answer Source

This problem appears to have been resolved by moving the base tag <base href="/"> from the body into the head section.