Search code examples
ruby-on-railsangularjsasset-pipelinepushstate

Angular + Rails app hang up whole browser when trying to fetch subpage

I'm writing application using Angular and Rails. I have fallback in my ApplicationController:

class ApplicationController < ActionController::Base
  protect_from_forgery

  before_filter :intercept_html_requests

  private

  def intercept_html_requests
    render('pages/index') if request.format == Mime::HTML
  end
end

And router like:

betly.config(function($routeProvider, $locationProvider) {
  $locationProvider.html5Mode(true);

  $routeProvider.when('/', {
    templateUrl: 'assets/tournaments.html',
    controller: 'tournamentController'
  }).when('/aaa', {
    templateUrl: 'assets/tournaments.html',
    controller: 'tournamentController'
  }).when('/matches/:matchId',{
    templateUrl: 'assets/matchDetails.html',
    controller: 'matchController'
  }).otherwise({
    redirectTo:'/'
  });
});

views/layouts/application.html.erb:

<!DOCTYPE html>
<html lang="en" ng-app>
  <head>
    <meta charset='utf-8' />
    <title>BetLy</title>
    <%= stylesheet_link_tag    "application", media: "all" %>
    <%= csrf_meta_tags %>
  </head>
  <body>
    <%= yield %>
    <%= javascript_include_tag "application" %>
  </body>
</html>

And when I'm trying to go to /matches/10 the browser infinitely download assets. Why and how to fix that?

Solution

  • Problem was in routes file. When you are trying to catch all routes in your Rails app then you shouldn't add / in route, so it should look like:

    match '*any', to: 'controller#method'

    instead of

    match '/*any', to: 'controller#method'