Question

我在Angular中启用了HTML5样式的网址（没有＆＃39;＃＆＃39;），如下所示：

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

并添加了一个基本标签：

<base href="/">

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

但是当我使用带有＆＃39;＃＆＃39;页面呈现正确。同样，如果我禁用HTML5样式的URL，页面呈现正确。

我使用ui-router，配置为：

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

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

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

通过Gulp任务注入的CSS：

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

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

任务看起来像：

var injectFiles = gulp.src（[ path.join（conf.paths.src，＆＃39; / app / ** / * .scss＆＃39;）， path.join（＆＃39;！＆＃39; + conf.paths.src，＆＃39; /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
};

问题：

为什么会发生这种情况，除了不使用HTML5风格的网址之外，我还能做些什么来修复它？

Answer 1

此问题似乎已通过将基本标记<base href="/">从正文移动到头部区域来解决。

Angular：HTML5样式的URL呈现时没有样式表

1 个答案: