8

I am getting a served the 404 page whenever I :

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

or

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

Here is my .config() code

'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

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.

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 /?

4

4 回答 4

13

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

这是简短的帖子：

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

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

首先，将 index.html 中的所有内容复制到 404.html。然后，将其添加到您的应用程序中：

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

请注意，如果您使用的是 angular 1.1.5，请确保您设置了 html5Mode 以正常工作。

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

于 2013-07-29T21:11:10.417 回答
4

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

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

这不会在任何页面上导致 404 响应。

于 2015-06-21T18:42:55.113 回答
2

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

如果你想在 Github 页面之外运行 AngularJS 应用程序，你不能使用html5Mode.

于 2013-07-29T03:14:32.617 回答
1

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

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

以下是一些需要做的更改：

  • 打开文件夹nginx.conf中的 nginx 配置文件 ( ) /etc/nginx/sites-enabled（路径会因您的 nginx 安装目录而异）。
  • 查找try_files $uri $uri/ =404;并替换为try_files $uri $uri/ /index.html;
  • 保存nginx配置文件
  • 重启nginxsudo service nginx restart

在进行上述更改后，我尝试重新加载页面。它按预期工作。

于 2016-04-07T16:34:55.220 回答