直接链接时AngularJS路由不起作用 - 使用html5模式和Firebase重写

时间:2015-07-17 20:03:44

标签: javascript angularjs url-rewriting firebase angularjs-routing

当我通过地址栏直接访问网址或直接从其他地方链接到我的Angular应用程序时遇到问题 - 所有地址都会恢复到主页。

但是,通过应用程序中的链接访问路线时工作正常。

此处已经有一些类似的问题

AngularJS HTML5Mode

Angular routing doesn't work when URL is directly visited in browser but works when clicked to?

据我了解,Angular代码在应用程序代码运行之前直接访问页面时不会运行,因此服务器端重写需要将浏览器指向index.html,此时应用程序运行和路由得到了。

我正在使用Firebase托管,它具有重写规则。

但是我已经按照上面列出的修复程序和网站上的其他地方进行了操作,但我仍然遇到问题。

我的路线看起来像这样:

app.js

.config(function($routeProvider, $locationProvider) {
    $routeProvider
        .when('/', {
            templateUrl: 'views/posts.html',
            controller: 'PostsCtrl'
        })
        .when('/posts/:postId', {
            templateUrl: 'views/postview.html',
            controller: 'PostViewCtrl'
        })
        .when('/new', {
            templateUrl: 'views/new-post.html',
            controller: 'AddPostCtrl'
        })
        .when('/register', {
            templateUrl: 'views/register.html',
            controller: 'AuthCtrl',
            resolve: {
                user: function(Auth) {
                    return Auth.resolveUser();
                }
            }
        })
        .when('/login', {
            templateUrl: 'views/login.html',
            controller: 'AuthCtrl',
            resolve: {
                user: function(Auth) {
                    return Auth.resolveUser();
                }
            }
        })
        .when('/edit-profile', {
            templateUrl: 'views/edit-profile.html',
            controller: 'EditProfileCtrl',
            resolve: {
                user: function(Auth) {
                    return Auth.resolveUser();
                }
            }
        })
        .when('/change-password', {
            templateUrl: 'views/change-password.html',
            controller: 'ChangePasswordCtrl',
            resolve: {
                user: function(Auth) {
                    return Auth.resolveUser();
                }
            }
        })
        .when('/@:userId', {
            templateUrl: 'views/profile.html',
            controller: 'ProfileCtrl',
            resolve: {
                user: function(Auth) {
                    return Auth.resolveUser();
                }
            }
        })
        .when('/users/:userId', {
            templateUrl: 'views/profile.html',
            controller: 'ProfileCtrl',
            resolve: {
                user: function(Auth) {
                    return Auth.resolveUser();
                }
            }
        })
        .when('/search', {
            templateUrl: 'views/search.html',
            controller: 'SearchCtrl'
        })
        .otherwise({
            redirectTo: '/'
        });
    $locationProvider.html5Mode(true);
})

我的firebase重写规则如下

firebase.json

"rewrites": [ {
    "source": "**",
    "destination": "/index.html"
          } ]

我的<base href="/">中也有<head>,如HTML5模式的Angular文档中所述

我已与Firebase联系,他们已确认重写在应用上正常运行。

注意:我还应该说,在没有 HTML5模式的情况下在本地运行应用时我也遇到了这个问题(所以在URL中使用/#/)。

我做错了什么?我假设它必须与我的路由有关。我已经尝试过改变我的&#39;否则&#39;转到另一条路线,看看是否正在拾取此错误,但它仍然会恢复到主页。

非常感谢这里的任何帮助,非常感谢。

1 个答案:

答案 0 :(得分:2)

是的,所以我是个白痴。我在一个重定向到'/'的服务中发现了一段流氓代码。道歉