使用rails重定向到html5mode中的正确角度路线

Question

我使用html5Mode删除了'#'在angular中，它可以正常工作，但是当我刷新它时，在rails中寻找模板而不是angular并抛出模板未找到错误。

角度路线

app.config([
    "$stateProvider", "$urlRouterProvider","$locationProvider",
    function ($stateProvider, $urlRouterProvider, $locationProvider) {
        $stateProvider
            .state("home", {
                url: "/",
                controller: "homeCtrl",
                templateUrl: "angular/templates/home.html"
            })
            .state("/dashboard", {
                url: "/dashboard",
                templateUrl: "angular/templates/dashboard/dashboard.html"
            })
            .state("/dashboard.active", {
                url: "/active",
                templateUrl: "angular/templates/dashboard/active.html",
                controller: "activeCtrl"
            })
            .state("/dashboard.inactive", {
                url: "/inactive",
                templateUrl: "angular/templates/dashboard/inactive.html",
                controller: "inactiveCtrl"
            })
            .state("/dashboard.drafts", {
                url: "/drafts",
                templateUrl: "angular/templates/dashboard/drafts.html",
                controller: "draftsCtrl",
                resolve: {
                    drafts: function (DashboardFactory) {
                        return DashboardFactory.drafts();
                    }
                }
            })
            .state("/room", {
                url: "/rooms/:id",
                templateUrl: "angular/templates/rooms/show.html",
                controller: "roomsCtrl",
                resolve: {
                    room: function (RoomFactory, $stateParams) {
                        var roomId = $stateParams.id;
                        return RoomFactory.show(roomId);
                    }
                }
            })
            .state("/search", {
                url: "/search?:latitude&:longitude",
                templateUrl: "angular/templates/search.html",
                controller: "searchCtrl",
                resolve: {
                    search: function (SearchFactory, $stateParams) {
                        var latitude = $stateParams.latitude;
                        var longitude = $stateParams.longitude;
                        return SearchFactory.search(latitude, longitude);
                    }
                }
            })
            .state("/conversations", {
                url: "/conversations",
                templateUrl: "angular/templates/conversations/conversations.html",
                controller: "conversationsCtrl",
                resolve: {
                    conversations: function (ConversationFactory) {
                        return ConversationFactory.showConversations();
                    }
                }
            })
            .state("/messages", {
                url: "/conversations/:id/messages",
                templateUrl: "angular/templates/conversations/messages.html",
                controller: "messagesCtrl",
                resolve: {
                    conversations: function (ConversationFactory, $stateParams) {
                        var conversationId = $stateParams.id;
                        return ConversationFactory.showMessages(conversationId);
                    }
                }
            })
            .state("/notifications", {
                url: "/notifications",
                templateUrl: "angular/templates/notifications/notifications.html",
                controller: "notificationsCtrl",
                resolve: {
                    notifications: function (NotificationFactory) {
                        return NotificationFactory.getNotifications();
                    }
                }
            });

        // use the HTML5 History API
        $locationProvider.html5Mode(true);
    }
]);  

Rails路线

Rails.application.routes.draw do
  require 'sidekiq/web'
  mount Sidekiq::Web => '/sidekiq'

  devise_for :users,
             :path => '',
             :path_names => {:edit => 'profile'},
             :controllers => {:registrations => 'registrations'}
  resource :pages, only: [:edit] do
    collection do
      patch 'update_password'
    end
  end

  resources :conversations, only: [:create, :index] do
    resources :messages, only: [:create, :index]
  end

  resources :notifications do
    collection do
      post :mark_as_read
    end
  end


  root 'pages#home'
  get '/general' => 'pages#general'
  get '/drafts' => 'rooms#drafts'
  get '/active' => 'rooms#active_listings'
  get '/inactive' => 'rooms#inactive_listings'
  get '/search' => 'pages#search'
  get '/change_password' => 'pages#change_password'



  resources :rooms do
    post :make_active
    post :make_inactive
    resources :photos, only: [:index, :create, :destroy]
  end

  mount ImageUploader.direct_endpoint, at: "/attachments/images"

end

同样在application.html.erb我将基数设置为<base href="/"> ..。

如果其路由页面（ localhost:3000 ）页面刷新有效。.但是，如果其搜索页面http://localhost:3000/search或任何其他页面则无效。

但是，当不使用html5mode一切正常。 我在这里做错什么了吗？ 这里遵循的正确方法是什么？

Answer 1

您可以如下禁用requireBase属性。

 $locationProvider.html5Mode({
    enabled: true,
    requireBase: false
  });

并且请指定$ routeProvider.otherwise（“ home”）。 也。 它应该工作。