Angular：HTML5 样式 URL 正在渲染，没有样式表

Question

我在 Angular 中启用了 HTML5 样式 URLs（没有“#”），如下所示：

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

并添加了一个基本标签：

<base href="/">

现在，当我导航到 http://profile.myapp.com/show/1234 时，它呈现的页面没有应用任何样式。

但是，当我将 URL 与“#”一起使用时，页面会正确呈现。同样，如果我禁用 HTML5 样式 URL，页面将正确呈现。

我正在使用 ui-路由器，配置为：

/** @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 通过 Gulp 任务注入：

CSS 是通过 Gulp 任务 from this Yeoman Generator 注入的。

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

任务看起来像：

var 注入文件 = gulp.src([ path.join(conf.paths.src, '/app/**/*.scss'), path.join('!' + conf.paths.src, '/app/index.scss') ], { 读: false });

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

问题：

为什么会发生这种情况，除了不使用 HTML5 样式 URL 之外，我还能做些什么来解决这个问题？

Answer 1

这个问题似乎已经通过将基本标签 <base href="/"> 从主体部分移到头部部分得到解决。

Angular：HTML5 样式 URL 正在渲染，没有样式表

Angular: HTML5 style URL is rendering with no stylesheet

html

javascript

css

angularjs