Angular приложение не загружает CSS и JS на обновляемую страницу?

У меня есть приложение, использующее AngularJS. Вот его ссылка - Angular App Все ссылки в навигационной панели используют маршрутизатор по умолчанию angular. Все страницы работают нормально, когда я обновляю их, но страница, например this > загружает контент без css и js, когда я обновляю его или перехожу к нему напрямую.

Я чувствую, что это проблема с маршрутизацией, хотя я не уверен. Вот файл app.js -

angular
  .module('jobSeekerApp', [
    'ngRoute'
  ])
  .config(function ($routeProvider, $locationProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/main.html',
        controller: 'MainCtrl',
        controllerAs: 'main'
      })
      .when('/about', {
        templateUrl: 'views/about.html',
        controller: 'AboutCtrl',
        controllerAs: 'about'
      })
      .when('/companies', {
        templateUrl: 'views/companiesall.html',
        controller: 'CompaniesallCtrl',
        controllerAs: 'companies'
      })
      .when('/jobs', {
        templateUrl: 'views/jobsall.html',
        controller: 'JobsallCtrl',
        controllerAs: 'jobs'
      })
      .when('/companies/:id', {
        templateUrl: 'views/company.html',
        controller: 'CompanyCtrl',
        controllerAs: 'company'
      })
      .when('/contact', {
        templateUrl: 'views/contact.html',
        controller: 'ContactCtrl',
        controllerAs: 'contact'
      })
      .otherwise({
        redirectTo: '/'
      });
      $locationProvider.html5Mode(true);
      $locationProvider.hashPrefix = '!';
  });

Это голова от index.html -

<head>
    <meta charset="utf-8">
    <title>Job Seeker</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">
    <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
    <!-- build:css(.) styles/vendor.css -->
    <!-- bower:css -->
    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
    <link rel="stylesheet" href="bower_components/animate.css/animate.css" />
    <link rel="stylesheet" href="bower_components/jssocials/dist/jssocials.css" />
    <link rel="stylesheet" href="bower_components/jssocials/dist/jssocials-theme-flat.css" />
    <!-- endbower -->
    <!-- endbuild -->
    <!-- build:css(.tmp) styles/main.css -->
    <link rel="stylesheet" href="/styles/main.css">
    <!-- endbuild -->
    <link rel="stylesheet" href="#" onclick="location.href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css'; return false;">
    <link href="#" onclick="location.href='https://fonts.googleapis.com/css?family=Bungee|Carrois+Gothic+SC|Oswald'; return false;" rel="stylesheet">
    <base href="/">
  </head>

Ответы

Ответ 1

Спасибо всем за вашу помощь, я нашел актуальную проблему в другом вопросе. Я должен был поставить <base href="/"> выше других ссылок в заголовке index.html. Вот ссылка для правильного ответа. Итак, теперь index.html выглядит следующим образом

<head>
    <meta charset="utf-8">
    <title>Job Seeker</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">

    <base href="/">

    <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
    <!-- build:css(.) styles/vendor.css -->
    <!-- bower:css -->
    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
    <link rel="stylesheet" href="bower_components/animate.css/animate.css" />
    <link rel="stylesheet" href="bower_components/jssocials/dist/jssocials.css" />
    <link rel="stylesheet" href="bower_components/jssocials/dist/jssocials-theme-flat.css" />
    <!-- endbower -->
    <!-- endbuild -->
    <!-- build:css(.tmp) styles/main.css -->
    <link rel="stylesheet" href="/styles/main.css">
    <!-- endbuild -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
    <link href="https://fonts.googleapis.com/css?family=Bungee|Carrois+Gothic+SC|Oswald" rel="stylesheet">
  </head>

Ответ 2

Вы используете режим истории html5 и почему он не может загружать файлы css и js. вам нужно использовать url re-writer для обслуживания index.html целиком, чтобы он мог загружать ваши файлы css и js, и вы можете иметь URL-адрес без хэша.

Примечание: -

Вы не заметите его, пока не обновите свою страницу. Все будет работать, пока вы не нажмете кнопку обновления и не станете статичной html-страницей без css и js

Что произошло, когда вы используете режим html-history?

Вы делаете запрос, и до того, как angular может отреагировать на этот запрос, ваш сервер найдет файл example.html и подаст его, и в этих файлах нет файлов css или js, в которых содержится ваш index.html, который содержит все ваши файлы, поэтому вам нужно сообщить серверу, что он просто продолжает обслуживать index.html, а затем angular перенаправляет на запрошенную страницу, которая будет отображаться в ng-view, и будет иметь все файлы css и js.

Серверная сторона (исходная документация angular)

Использование этого режима требует перезаписи URL-адресов на стороне сервера, в основном вы должны переписать все свои ссылки на точку входа вашего приложения (например, index.html). Требование к тегу также важно для этого случая, так как позволяет angular различать часть URL-адреса, которая является базой приложения, и путь, который должен обрабатывать приложение.