如何使用Angular(AngularFire)和Firebase解析深层链接

Question

消歧：

这个问题并不是因为firebase.json中的重写配置错误。firebase文档在这里明确说明了如何做到这一点。问题是，只有肤浅的链接才起作用；深度链接则不然。

问题：

使用AngularFire和Firebase打开html5Mode后，深度链接不起作用：一级页面加载；任何其他页面都不会。所以/login起作用，而/supplier/accounts不起作用。

config.js:

function configState($stateProvider, $urlRouterProvider, $compileProvider, $httpProvider) {
    // Optimize load start with remove binding information inside the DOM element
    $compileProvider.debugInfoEnabled(true);
    // Set default state
    $urlRouterProvider.otherwise("/login");
    $stateProvider
        /* 
         * Common Views
         */
        .state('common', {
            abstract: true,
            templateUrl: "views/common/content_empty.html",
            data: {
                pageTitle: 'Common'
            }
        })
        .state('common.login', {
            url: "/login",
            templateUrl: "views/common_app/login.html",
            data: {
                pageTitle: 'Login page',
                specialClass: 'blank'
            }
        })
        .state('common.logout', {
            url: "/logout",
            templateUrl: "views/common_app/logout.html",
            data: {
                pageTitle: 'Logout page',
                specialClass: 'blank'
            },
            resolve: {
                // controller will not be loaded until $requireAuth resolves
                "currentAuth": ["$state", "Auth", "loginRedirectPath", function($state, Auth, loginRedirectPath) {
                    return Auth.$requireAuth();
                }]
            }
        })
        /* 
         * Secure Abstract Class
         */
        .state('secure', {
            abstract: true,
            templateUrl: "views/common/content_empty.html",
            resolve: {
                // controller will not be loaded until $requireAuth resolves
                "currentAuth": ["$state", "Auth", "loginRedirectPath", function($state, Auth, loginRedirectPath) {
                    return Auth.$requireAuth();
                }]
            }
        })   

        /* 
         * Supplier Accounts
         */
        .state('secure.account', {
            abstract: true,
            url: "/supplier",
            templateUrl: "views/common/content.html",
            data: {
                pageTitle: 'Supplier'
            }
        })       
        .state('secure.account.accounts', {
            url: "/accounts",
            templateUrl: "views/account/accounts.html",
            controller: "suppliersListCtrl as suppliersListCtrl",
            data: {
                pageTitle: 'Accounts',
                pageDesc: 'Accounts assiged to this User'
            }
        })
};
angular
    .module('app')
    // for ui-router
    .run(["$rootScope", "$state", function($rootScope, $state) {
        $rootScope.$on("$stateChangeError", function(event, toState, toParams, fromState, fromParams, error) {
            // Catch the error thrown when the $requireAuth promise is rejected
            // redirect the user back to the login page
            if (error === "AUTH_REQUIRED") {
                console.log("AUTH_REQUIRED Fired!!!");
                $state.go("common.login");
            }
        });
        // Log ui-router errors in the console
        $rootScope.$on("$stateChangeError", console.log.bind(console));
    }])
    .factory("Auth", ["$firebaseAuth", "FIREBASE_URI",
        function($firebaseAuth, FIREBASE_URI) {
            var ref = new Firebase(FIREBASE_URI);
            return $firebaseAuth(ref);
        }
    ])
    .config(["$locationProvider", function($locationProvider) {
        $locationProvider.html5Mode(
            {
                enabled: true,
                requireBase: false
            });
    }])
    .constant('FIREBASE_URI', '<FIRE BASE URI HERE>')
    .constant('loginRedirectPath', 'common.login')
    .config(configState)

firebase.json:

{
    "firebase": "firebase-app",
    "public": "main",
    "rewrites": [{
        "source": "**",
        "destination": "/index.html"
    }],
    "ignore": [
        "firebase.json",
        "**/.*",
        "**/node_modules/**"
    ]
}

Answer 1

(查看了我推送的错误修复程序，所以这个问题不会一直没有答案。(

原来是我的格伦菲尔。我需要在Grunt服务器设置中更新我的LiveReload配置。您的LiveReload更改应该如下所示：

// Grunt configuration
grunt.initConfig({
    // Project settings
    your_application_name: appConfig,
    // The grunt server settings
    connect: {
        options: {
            port: 8000,
            hostname: 'localhost',
            livereload: 35729
        },
        livereload: {
            options: {
                open: true,
                middleware: function (connect) {
                    return [
                        modRewrite(['^[^\.]*$ /index.html [L]']),
                        connect.static('.tmp'),
                        connect().use(
                            '/bower_components',
                            connect.static('./bower_components')
                        ),
                        connect.static(appConfig.app)
                    ];
                }
            }
        }
        //...
    }
});