CODEWITHSUNDEEP
javascriptruby-on-railsangularjsangularjs-templates
jcuenod
jcuenod

Reputation: 58375

angular-rails-templates Failed to load template

I'm trying to get Angular to load a template:

var app = angular.module("myApp", ['templates'])

and my html:

<div ng-app="myApp">
  <div ng-include="'blah.html'"></div>
</div>

But all I get is a 404 Failed to load resource because, Rails tells me, No route matches [GET] "/blah.html". I understand that this is because of the asset pipeline in Rails. blah.html is in /app/assets/javascripts/templates/blah.html and I am using the angular-rails-templates gem to try to solve the problem. So my application.js has:

//= require angular-rails-templates
//= require_tree ./templates

But I'm not having any luck.

The html generated suggests that angular-rails-templates is loading (it has a script /assets/angular-rails-templates....js) but rails is failing to find blah.html

Versions:
rails 4.2.1
angular-rails-templates 0.1.4
angularjs 1.3.15

Upvotes: 4

Views: 1949

Answers (5)

KurtPreston
KurtPreston

Reputation: 1152

After struggling for an hour to get this, I realized that I had a JavaScript file sharing the same name.

For example, these files will cause conflict:

component.js
component.html.haml

So I made sure to rename the JavaScript file to something like:

component-directive.js
component.html.haml

Upvotes: 1

jcuenod
jcuenod

Reputation: 58375

This turned out to be a sprockets incompatibility (see here and here)

The short version is:

  1. Add gem 'sprockets', '2.12.3' to your Gemfile
  2. Run bundle update sprockets

[Update] I'm no expert on this stuff but it does seem that a number of people smarter than I are suggesting using /public/templates. You may want to bear this in mind.

Upvotes: 11

Kyle
Kyle

Reputation: 1183

I had a similar issue - In my haste, I neglected to fully read the directions, and missed step 3.

Adding a Dependency in the Angular Application Module solved it for me, and the templates are served through the asset pipeline...

//= require angular-rails-templates
//= require_tree .

angular.module('d-angular', ['templates'])

Upvotes: 2

wonook
wonook

Reputation: 43

I've been struggling on the same problem today, and I think I have found a solution for this problem.

try

<div ng-include="'assets/blah.html'"></div>

OR

<div ng-include="'assets/templates/blah.html'"></div>

instead of

<div ng-include="'blah.html'"></div>

This solved the problem for me.

Upvotes: 0

csbarnes
csbarnes

Reputation: 1893

I put my angular template files under public/templates which is accessible via <site root>/templates without any additional configuration.

Upvotes: 1

Related Questions