在AngularJS网站上刷新404页面？

I am getting a served the 404 page whenever I :

无论什么时候，我都会收到404页面的服务：

1.) refresh any page on my Angularjs site (besides the root page)

1.）刷新我的Angularjs站点上的任何页面（除了根页面）

要么

2.) click Back to go from a 404 page to the root page (the root page will be a 404)

2.）单击“返回”从404页面转到根页面（根页面为404）

Here is my .config() code

这是我的.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: '/'
      });
  });

I have come across this similar question but do not quite understand the answers or how to implement them.

我遇到过类似的问题，但不太了解答案或如何实现它们。

AngularJS - Why when changing url address $routeProvider doesn't seem to work and I get a 404 error

AngularJS - 为什么在更改url地址$ routeProvider似乎不起作用时我收到404错误

The accepted answer says to setup Apache to reconfigure all paths to the root. My site is on Github Pages. I have a .htaccess file in my gh-pages repo but I have no idea how to configure it to send all paths to the root.

接受的答案是设置Apache以重新配置到根的所有路径。我的网站是在Github Pages上。我的gh-pages repo中有一个.htaccess文件，但我不知道如何配置它以将所有路径发送到根目录。

The answer says another thing to consider is using the <base> element like <base href="/" /> but where would I place that? In my index.html? If so at the top or bottom of that file? Also, would I just leave the href value to /?

答案说另外要考虑的是使用像这样的元素，但是我会把它放在哪里？在我的index.html中？如果是这样在该文件的顶部或底部？另外，我只是将href值保留为/？

4 个解决方案

#1

I came across a solution here: https://coderwall.com/p/kfomwa

我在这里遇到了一个解决方案：https：//coderwall.com/p/kfomwa

Here's the short post:

这是短篇文章：

angularjs provides html5Mode, which makes your app use pushstate-based URL instead of hashtags. However this requires server side support, since the generated urls need to be rendered properly as well.

angularjs提供html5Mode，这使您的应用程序使用基于pushstate的URL而不是hashtags。但是，这需要服务器端支持，因为生成的URL也需要正确呈现。

This actually works fine with github pages' custom 404 pages, though it's only available for custom domain enabled pages.

这实际上适用于github页面的自定义404页面，但它仅适用于启用自定义域的页面。

First, copy everything inside index.html to 404.html. Then, add this to your app:

首先，将index.html中的所有内容复制到404.html。然后，将其添加到您的应用中：
 angular.module('app', []).config(function($locationProvider) {
      $locationProvider.html5Mode(true);
    });
Note that if you are on angular 1.1.5, make sure you set for html5Mode to work properly.

请注意，如果您使用的是角度1.1.5，请确保将html5Mode设置为正常工作。

Following these suggestions I was able to get my site working properly. Now when I hit Reload, the page loads properly.

根据这些建议，我能够使我的网站正常运行。现在，当我点击重新加载时，页面正确加载。

#2

The better option would be to redirect any url to the index.html:

更好的选择是将任何url重定向到index.html：

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

This will NOT cause a 404 response on any page.

这不会在任何页面上引起404响应。

#3

Github pages only serves static files. It won't read any configuration settings you have for Apache in .htaccess.

Github页面仅提供静态文件。它不会读取.htaccess中Apache的任何配置设置。

If you want to run an AngularJS app out of Github pages, you cannot use html5Mode.

如果要从Github页面运行AngularJS应用程序，则不能使用html5Mode。

#4

I'm running my angularjs application using Nginx on Vagrant. And facing the similar kind of issue. On reloading the browser with any url, it gives me a 404 page.

我在Vagrant上使用Nginx运行我的angularjs应用程序。并面临类似的问题。在使用任何网址重新加载浏览器时，它会给我一个404页面。

I have enabled the html5mode in main js file. When you have html5Mode enabled, the # character will no longer be used in your urls. The # symbol is useful because it requires no server side configuration. Without #, the url looks much nicer, but it also requires server side changes.

我在主js文件中启用了html5mode。启用html5Mode后，您的网址中将不再使用＃字符。＃符号很有用，因为它不需要服务器端配置。没有＃，url看起来更好，但它也需要服务器端更改。

Here are some changes to do:

以下是一些要做的更改：

Open nginx configuration file (nginx.conf) in /etc/nginx/sites-enabled folder (path will vary based on your nginx installation directory).
在/ etc / nginx / sites-enabled文件夹中打开nginx配置文件（nginx.conf）（路径将根据您的nginx安装目录而有所不同）。
Find try_files $uri $uri/ =404; and replace it with try_files $uri $uri/ /index.html;
找到try_files $ uri $ uri / = 404;并用try_files $ uri $ uri / /index.html替换它;
Save the nginx configuration file
保存nginx配置文件
Restart the nginx sudo service nginx restart
重启nginx sudo服务nginx restart

And I have tried to reload the page after doing above changes. It works as expected.

我做了以上更改后尝试重新加载页面。它按预期工作。

#1