Пути к файлам CSS не разрешаются должным образом при угловом просмотре ng

Question

У меня есть угловое приложение с настройкой ng-view. У меня есть маршруты, которые имеют глубину 1 и 2 уровня, такие как:

  .when('/sample', {
    templateUrl: 'views/sample.html',
    controller: 'SampleCtrl'
  })
  .when('/sample/:id', {
    templateUrl: 'views/sample.html',
    controller: 'SampleCtrl'
  })

Я использую режим html5 для удаления скотча, поэтому мои маршруты отображаются как "localhost:9000/sample" вместо "localhost:9000#/sample"

Я также использую сервер modrewrite узла, чтобы включить режим html5, чтобы я мог принимать прямые ссылки на глубокую ссылку в моем URL (например, localhost:9000/sample/id), используя модуль connect-modrewrite npm и следующую конфигурацию grunt.:

      middleware: function (connect) {
        return [
          modRewrite(['^[^\\.]*$ /index.html [L]']),
          connect.static('.tmp'),
          connect().use(
            '/bower_components',
            connect.static('./bower_components')
          ),
          connect.static(appConfig.app)
        ];
      }

У меня есть файлы CSS, определенные в моем заголовке, например:

 <link rel="stylesheet" href="styles/main.css">

Это работает нормально при маршрутизации в моем приложении. Это также работает, когда я принимаю прямые ссылки глубиной в один уровень, поэтому переход непосредственно к "localhost:9000/sample" сделает страницу в порядке. Однако, когда я использую прямую ссылку на путь глубиной 2 уровня, например "localhost:9000/sample/id", мое приложение не будет правильно отображать мой css, и я увижу консольные ошибки, такие как:

GET http://localhost:5309/snippet/styles/main.css 

Нет проблем с разрешением моих зависимостей javascript, в которых используются относительные пути того же типа, что и CSS. Я могу исправить это, поставив косую черту перед стилем (href="/styles/main.css"), но я бы предпочел этого не делать, так как это ограничит возможности развертывания моего приложения, а также не то, как wiredep устанавливает зависимости css bower по умолчанию. Есть ли какой-нибудь дружественный для angular-ng view способ убедиться, что пути моего css-файла могут разрешаться правильно, независимо от того, по какому маршруту я нахожусь?

Answer 1

Я так и не получил ответа на этот вопрос, поэтому я пошел по префиксу моих css-файлов с косой чертой, и он работал нормально. Если кто-то еще сталкивается с этим вопросом и нуждается в нем, то это изменение, которое я внес в мою команду Gruntfile wiredep, чтобы префикс моего импорта css косыми чертами

  wiredep: {
   app: {
    fileTypes: {
      html: {
        replace: {
          css: '<link rel="stylesheet" href="/{{filePath}}" />'
        }
      }
    }
  }