Angular：HTML5样式URL正在呈现，没有样式表

Question

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

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

And added a base tag:

<base href="/">

Now when I navigate to http://profile.myapp.com/show/1234 it renders the page without any styles applied.

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

I'm using ui-router, configured with:

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

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

    $urlRouterProvider.otherwise('/show/1234');
}

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
};

Question:

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

Answer 1

通过将基本标记<base href="/">从主体移到头部，似乎已解决了该问题。