在AngularJS网站上刷新404页面？-Getting404pageonrefreshonAngularJSsite?

13  

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.

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

3  

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响应。

2  

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。

1  

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.

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