Получение страницы 404 при обновлении на сайте AngularJS?

Я получаю обслуживаемую страницу 404 всякий раз, когда я:

1.) обновить любую страницу на моем сайте Angularjs (кроме корневой страницы)

или

2.) клик назад перейти от страницы 404 к корневой странице (корневая страница будет 404)

вот мой .config() код

'use strict';

angular.module('mmApp', ['ngResponsiveImages'])
  .config(function ($locationProvider, $routeProvider) {
    $locationProvider.html5Mode(true);
    $locationProvider.hashPrefix = '!';
    $routeProvider
      .when('/', {
        templateUrl: '/views/design.html',
        controller: 'MainCtrl'
      })
      .when('/about', {
        templateUrl: '/views/about.html',
        controller: 'MainCtrl'
      })
      .when('/contact', {
        templateUrl: '/views/contact.html',
        controller: 'MainCtrl'
      })     
      .otherwise({
        redirectTo: '/'
      });
  });

я столкнулся с этим подобным вопросом, но делаю не совсем понимаю ответы или как их реализовать.

AngularJS-почему при изменении url-адреса $routeProvider, похоже, не работает, и я получаю ошибку 404

принятый ответ говорит, чтобы настроить Apache для перенастройки всех путей к корню. Мой сайт находится на страницах Github. У меня есть .htaccess файл в my gh-pages repo, но я понятия не имею, как настроить его для отправки всех путей к корню.

ответ говорит еще одну вещь, чтобы рассмотреть это с помощью <base> элемент, как <base href="/" /> но где бы я это разместил? В моем index.html? Если да, то в верхней или нижней части этого файла? Кроме того, я бы просто оставил href значение /?

8
.htaccess angularjs github github-pages http-status-code-404

4 ответов

я наткнулся на решение здесь:https://coderwall.com/p/kfomwa

вот короткий пост:

angularjs предоставляет html5Mode, который заставляет ваше приложение использовать URL-адрес на основе pushstate вместо хэштегов. Однако для этого требуется поддержка на стороне сервера, так как сгенерированные URL-адреса также должны отображаться правильно.

это на самом деле отлично работает с пользовательскими 404 страницами GitHub pages, хотя он доступен только для настраиваемого домена страницы.

во-первых,скопировать все внутри индекса.html до 404.формат html. затем добавьте это в свое приложение:

 angular.module('app', []).config(function($locationProvider) {
      $locationProvider.html5Mode(true);
    });

обратите внимание, что если вы находитесь на angular 1.1.5, убедитесь, что вы установили для html5Mode работать правильно.

следуя этим предложениям, я смог заставить свой сайт работать правильно. Теперь, когда я нажимаю Reload, страница загружается правильно.

13

лучшим вариантом было бы перенаправить любой url-адрес в индекс.HTML-код:

RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^.*$ index.html

Это не вызовет ответа 404 на любой странице.

3

страницы Github обслуживают только статические файлы. Он не будет читать какие-либо настройки конфигурации, которые у вас есть для Apache .реврайт.

Если вы хотите запустить приложение AngularJS из страниц Github, вы не можете использовать html5Mode.

2

я запускаю приложение angularjs с помощью Nginx на бродягу. И столкнулся с подобной проблемой. При перезагрузке браузера с любым url-адресом он дает мне страницу 404.

Я включил html5mode в главном файле js. Когда у вас включен html5Mode,# персонаж больше не будет использоваться в URL. The # символ полезен, потому что он не требует настройки на стороне сервера. Без #, url выглядит намного лучше, но он также требует изменений на стороне сервера.

вот некоторые изменения, чтобы сделать:

  • открыть файл конфигурации nginx (nginx.conf) в /etc/nginx/sites-enabled папка (путь будет зависеть от вашего каталога установки nginx).
  • найти try_files $uri $uri/ =404; и заменить try_files $uri $uri/ /index.html;
  • сохраните файл конфигурации nginx
  • перезапустите nginx sudo service nginx restart

и я попытался перезагрузить страницу после выполнения вышеуказанных изменений. Работает, как и ожидалось.

1