ActionController::RoutingError (No route matches [GET] "/index.html") with AngularJS and Rails

Question

I am learning AngularJS and how to use it with Rails, so I started following this book and everything on the Chapter 1 worked perfectly... This includes install the necessary gems, install bower, install dependencies via bower, setup the asset path, etc... even the Tiniest Angular app ever worked perfectly.

I got the problem while I was following the instructions of Chapter 2.

Supposedly I should see this when I access to my app, but instead of that I see this, a blank page...

The full error displayed on the terminal is this

ActionController::RoutingError (No route matches [GET] "/index.html"):
  actionpack (4.2.0) lib/action_dispatch/middleware/debug_exceptions.rb:21:in `call'
  web-console (2.2.1) lib/web_console/middleware.rb:39:in `call'
  actionpack (4.2.0) lib/action_dispatch/middleware/show_exceptions.rb:30:in `call'
  railties (4.2.0) lib/rails/rack/logger.rb:38:in `call_app'
  railties (4.2.0) lib/rails/rack/logger.rb:20:in `block in call'
  activesupport (4.2.0) lib/active_support/tagged_logging.rb:68:in `block in tagged'
  activesupport (4.2.0) lib/active_support/tagged_logging.rb:26:in `tagged'
  activesupport (4.2.0) lib/active_support/tagged_logging.rb:68:in `tagged'
  railties (4.2.0) lib/rails/rack/logger.rb:20:in `call'
  actionpack (4.2.0) lib/action_dispatch/middleware/request_id.rb:21:in `call'
  rack (1.6.4) lib/rack/methodoverride.rb:22:in `call'
  rack (1.6.4) lib/rack/runtime.rb:18:in `call'
  activesupport (4.2.0) lib/active_support/cache/strategy/local_cache_middleware.rb:28:in `call'
  rack (1.6.4) lib/rack/lock.rb:17:in `call'
  actionpack (4.2.0) lib/action_dispatch/middleware/static.rb:113:in `call'
  rack (1.6.4) lib/rack/sendfile.rb:113:in `call'
  railties (4.2.0) lib/rails/engine.rb:518:in `call'
  railties (4.2.0) lib/rails/application.rb:164:in `call'
  rack (1.6.4) lib/rack/lock.rb:17:in `call'
  rack (1.6.4) lib/rack/content_length.rb:15:in `call'
  rack (1.6.4) lib/rack/handler/webrick.rb:88:in `service'
  /home/patricio/.rvm/rubies/ruby-2.2.1/lib/ruby/2.2.0/webrick/httpserver.rb:138:in `service'
  /home/patricio/.rvm/rubies/ruby-2.2.1/lib/ruby/2.2.0/webrick/httpserver.rb:94:in `run'
  /home/patricio/.rvm/rubies/ruby-2.2.1/lib/ruby/2.2.0/webrick/server.rb:294:in `block in start_thread'


  Rendered /home/patricio/.rvm/gems/ruby-2.2.1@rezeta/gems/actionpack-4.2.0/lib/action_dispatch/middleware/templates/rescues/_trace.html.erb (2.1ms)
  Rendered /home/patricio/.rvm/gems/ruby-2.2.1@rezeta/gems/actionpack-4.2.0/lib/action_dispatch/middleware/templates/routes/_route.html.erb (1.8ms)
  Rendered /home/patricio/.rvm/gems/ruby-2.2.1@rezeta/gems/actionpack-4.2.0/lib/action_dispatch/middleware/templates/routes/_table.html.erb (7.6ms)
  Rendered /home/patricio/.rvm/gems/ruby-2.2.1@rezeta/gems/actionpack-4.2.0/lib/action_dispatch/middleware/templates/rescues/_request_and_response.html.erb (1.2ms)
  Rendered /home/patricio/.rvm/gems/ruby-2.2.1@rezeta/gems/actionpack-4.2.0/lib/action_dispatch/middleware/templates/rescues/routing_error.html.erb within rescues/layout (39.5ms)
  Rendered /home/patricio/.rvm/gems/ruby-2.2.1@rezeta/gems/web-console-2.2.1/lib/web_console/templates/_markup.html.erb (0.4ms)
  Rendered /home/patricio/.rvm/gems/ruby-2.2.1@rezeta/gems/web-console-2.2.1/lib/web_console/templates/_inner_console_markup.html.erb within layouts/inlined_string (0.5ms)
  Rendered /home/patricio/.rvm/gems/ruby-2.2.1@rezeta/gems/web-console-2.2.1/lib/web_console/templates/_prompt_box_markup.html.erb within layouts/inlined_string (0.3ms)
  Rendered /home/patricio/.rvm/gems/ruby-2.2.1@rezeta/gems/web-console-2.2.1/lib/web_console/templates/style.css.erb within layouts/inlined_string (0.3ms)
  Rendered /home/patricio/.rvm/gems/ruby-2.2.1@rezeta/gems/web-console-2.2.1/lib/web_console/templates/console.js.erb within layouts/javascript (15.3ms)
  Rendered /home/patricio/.rvm/gems/ruby-2.2.1@rezeta/gems/web-console-2.2.1/lib/web_console/templates/main.js.erb within layouts/javascript (0.2ms)
  Rendered /home/patricio/.rvm/gems/ruby-2.2.1@rezeta/gems/web-console-2.2.1/lib/web_console/templates/error_page.js.erb within layouts/javascript (0.3ms)
  Rendered /home/patricio/.rvm/gems/ruby-2.2.1@rezeta/gems/web-console-2.2.1/lib/web_console/templates/index.html.erb (29.7ms)

I do not understand why this happens and I have not been able to solve this so far.

The only changes I made from Chapter 1 to where I got the problem in Chapter 2 were:

Add gem 'angular-rails-templates' to the Gemfile.
Run bundle install.
Add asset 'angular-route' to the Bowerfile.
Run rake bower:install.
Add //= require angular-route/angular-route and //= require angular-rails-templates to the /assets/javascripts/application.js file.

And finally put the following code to their files, as it comes in the book.

app/views/home/index.html.erb

<div ng-app="receta">
  <div class="view-container">
    <div ng-view class="view-frame animate-view"></div>
  </div>
</div>

app/assets/javascripts/app.coffee

receta = angular.module('receta',[
  'templates',
  'ngRoute',
  'controllers',
])

receta.config([ '$routeProvider',
  ($routeProvider)->
    $routeProvider
      .when('/',
        templateUrl: "index.html"
        controller: 'RecipesController'
      )
])

controllers = angular.module('controllers',[])
controllers.controller("RecipesController", [ '$scope',
  ($scope)->
])

app/assets/javascripts/templates/index.html

<header class="row">
  <h1 class="text-center col-md-6 col-md-offset-3">Find Recipes</h1>
</header>
<section class="row">
  <form>
    <div class="form-group col-md-6 col-md-offset-3">
      <label for="keywords" class="sr-only">Keywords</label>
      <input type="text" autofocus class="form-control" placeholder="Recipe name, e.g. Baked Potato">
    </div>
    <div class="form-group col-md-6 col-md-offset-3 text-center">
      <button class="btn btn-primary btn-lg">Search</button>
    </div>
  </form>
</section>
<hr>
<section class="row">
  <h1 class="text-center h2">Results</h1>
  <section class="well col-md-6 col-md-offset-3">
    <h1 class="h3 col-md-6 text-right" style="margin-top: 0"><a href="#">Baked Potato w/ Cheese</a></h1>
    <div class="col-md-6">
      <button class="btn btn-info">Edit</button>
      <button class="btn btn-danger">Delete</button>
    </div>
  </section>
  <section class="well col-md-6 col-md-offset-3">
    <h1 class="h3 col-md-6 text-right" style="margin-top: 0"><a href="#">Garlic Mashed Potatoes</a></h1>
    <div class="col-md-6">
      <button class="btn btn-info">Edit</button>
      <button class="btn btn-danger">Delete</button>
    </div>
  </section>
  <section class="well col-md-6 col-md-offset-3">
    <h1 class="h3 col-md-6 text-right" style="margin-top: 0"><a href="#">Potatos Au Gratin</a></h1>
    <div class="col-md-6">
      <button class="btn btn-info">Edit</button>
      <button class="btn btn-danger">Delete</button>
    </div>
  </section>
</section>

This is the github repository (with the corresponding commit) of the application I'm trying to do, in case you want to see some other file, I really do not know what other info I should give because I'm new to AngularJS and how to use it in Rails.

EDIT:

rake routes

    Prefix Verb URI Pattern           Controller#Action
home_index GET  /home/index(.:format) home#index
      root GET  /                     home#index

app/assets/javascripts/application.js

// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file.
//
// Read Sprockets README (https://github.com/sstephenson/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require angular/angular
//= require angular-route/angular-route
//= require angular-rails-templates
//= require_tree ./templates
//= require_tree

Bowerfile

asset 'angular'
asset 'angular-route'
asset 'bootstrap-sass-official'
# vim: ft=ruby

Do you have a route defined for your `root_path` in `config/routes.rb`? E.g. `root :to => 'home#index'` — dinjas, Dec 09 '15 at 19:53
Have you added `require_tree ./templates` to your application.js? — BroiSatse, Dec 09 '15 at 20:05
@BroiSatse I had not, but I just added `// = require_tree ./templates` and there was no change. — Patricio Sard, Dec 09 '15 at 20:12
@cursillosonline - have you added it after `//= require angular-rails-template`? — BroiSatse, Dec 09 '15 at 20:14
@cursillosonline - also, have you added templates to your angular module dependencies? — BroiSatse, Dec 09 '15 at 20:21
the error really looks like a routing error to me. If you run `rake routes`, are there any routes that point to `home#index`? — dinjas, Dec 09 '15 at 20:52
@dinjas - This is not routing error. 'rails-angular-templates' should add all the templates to the angular cache - when everything is correct then there should be no request at all. — BroiSatse, Dec 09 '15 at 21:02
I edited the post to add the result of rake routes, and the code from app/assets/javascripts/application.js and Bowerfile. — Patricio Sard, Dec 09 '15 at 21:05
@cursillosonline - Sanity check, when you open the page, your browser should load q lot of javascript files. Are there any files from templates folder? (You can check it in developer tools under scripts tab). Actually it has to be there otherwise your angular module would fail to instantiate. Question is, what is in those files: you should see something like `($templateCache.put(important stuff here))` — BroiSatse, Dec 09 '15 at 21:16

score 0 · Answer 1 · edited May 23 '17 at 12:23

0

Adding gem 'sprockets', '2.12.3 to my Gemfile, running bundle update and finally restarting the server by Ctrl+C and rails server did the trick for me.

The solution was mentioned here, but the problem in my case persisted cause I didn't restart the server.

edited May 23 '17 at 12:23

Community

1
1

answered Dec 10 '15 at 03:59

Patricio Sard

2,092
3
22
52

ActionController::RoutingError (No route matches [GET] "/index.html") with AngularJS and Rails

1 Answers1