Make angular-rails-templates work with Sprockets 3.0

[jonricaurte]

The new version of sprockets will require angular-rails-templates to use transformers instead of what it is currently using according to @rafaelfranca:

rails/sprockets#22

Sprockets 3.0.0 includes support for babel transpiling using the es6 gem which is going to be very important as angular moves towards using ecmascript 6.

Thanks.

[rafaelfranca]

👍 Let me know if you need help with the new API.

[jonricaurte]

To get unblocked, here are some sample files until it gets merged in to angular-rails-templates:

https://gist.github.com/stevenharman/8493700

http://minhajuddin.com/2013/04/28/angularjs-templates-and-rails-with-eager-loading

[jonricaurte]

Note: this doesn't watch for changes

[jonricaurte]

@rafaelfranca With the temporary solution I have to have rails c open in a tab and have to delete temp assets every time I make a slim change. Is there a better way around this than listed where I don't have to delete the temp assets? Thanks!

[jonricaurte]

So if you don't want to have to use rails c and Rails.cache.clear, you can run guard and have this in your guard file:

guard 'rake', :task => 'tmp:clear' do
watch(%r{^app/.+.(slim)})
end

and have this in your gem file

gem 'guard'
gem 'guard-compat'
gem 'guard-rake'

[tobidelius]

tmp:clear is annoying like h*ll :/

[styx]

/CC

[asciant]

+1

[bmulholland]

+1

[gottfrois]

Had to downgrade to version 2.x as well, would be great to see that out and working :)

[panzershreck]

+1

[ehahn9]

+1 (to use sprockets transformers instead)

[pitr]

Thanks @davetron5000 for PR and everybody else for suggestions.

Did anybody manage to get this gem working with sprockets transformers?

[tobidelius]

any update on this? At the moment I'm stuck with:

angular.module('templates', []).run(['$templateCache', function($templateCache) {
  <%
    environment.context_class.instance_eval { include ActionView::Helpers::JavaScriptHelper }
    app_root  = File.expand_path('../../', __FILE__)
    templates = File.join(app_root, %w{templates ** *.html})

    Dir.glob(templates).each do |f|
      key  = f.gsub(%r(^#{app_root}/templates/), '')
      html = File.read(f).squish
  %>
    $templateCache.put("<%= key %>", "<%= escape_javascript(html) %>");
<% end %>
}]);

but I have to run rake tmp:clear everytime I make changes to the templates.

[sars]

any updates regarding support sprockets 3?

[jaybloke]

+1

[mcasimir]

Having issues to both use Sprockets 3 and downgrade I ended up getting rid of the gem completely and solved it like that (hope this will help maintainers to fix the issue if it is not done yet):

1 - Add gem 'listen', '~> 2.7' to Gemfile

2 - Create config/initializers/angular_templates.rb like this:

require 'fileutils'

if Rails.env.development?
  cache_path = Rails.root.join('tmp/cache/assets/development')
  FileUtils.rm_rf(cache_path)

  listener = Listen.to(Rails.root.join('app/assets/templates')) do |modified, added, removed|
    # clearing cache
    FileUtils.rm_rf(cache_path)
  end
  listener.start
end

3 - Create app/assets/javascripts/templates.js.erb:

(function(){
  'use strict';

  angular.module('templates', []).run(['$templateCache', function($templateCache) {
    <%
      environment.context_class.instance_eval { include ActionView::Helpers::JavaScriptHelper }
      app_root  = File.expand_path('../../', __FILE__)
      templates = File.join(app_root, %w{templates ** *.html})

      Dir.glob(templates).each do |f|
        key  = f.gsub(%r(^#{app_root}/templates/), '')
        html = File.read(f).squish
    %>
      $templateCache.put("<%= key %>", "<%= escape_javascript(html) %>");
  <% end %>
  }]);
}());

Done.. now just require your templates in application.js or whatever and they will be complied and included as expected (no need to start guard, no need to run rake tmp:cache):

//= require angular
// ...
//= require ./templates
// ...
angular.module('myApp', ['templates']);

[turlockmike]

+1

[Rodeoclash]

+1

[olegantonyan]

+1

[CompuIves]

+1

[lexi-lambda]

+1

[thontaddeo]

+1

[GarPit]

👍

[aidanhmiles]

@mcasimir thanks a million for the sample setup! works great. for anyone else using his fix, it expects templates to be placed in app/assets/templates. you may need to tweak for your own setup.

[bopm]

👍

[mvarrieur]

@jonricaurte Is there a gulp workflow that will compile .html files into the angular $templateCache like this gem was doing? I'd be interested in learning about it.

[jonricaurte]

@mvarrieur yes.

Here is what I use for gulp file:

gulp.task('slim', function(){
  return gulp.src('app/assets/javascripts/**/*.slim')
    .pipe(slm())
    .pipe(rename(function (path) {
      path.dirname = path.dirname.replace('beauty/', '');
      path.extname = '';
    }))
    .pipe(minifyHtml({
      empty: true,
      spare: true,
      quotes: true
    }))
    .pipe(ngHtml2Js({
      moduleName: 'templates'
    }))
    .pipe(concat('templates.js'))
    .pipe(gulp.dest('app/assets/javascripts/vendor'));


    // sfx build
    //.pipe(gulp.dest('public/assets'));
});

using gulp-rename, slim, gulp-ng-html2js, gulp-minify-html, gulp-concat, gulp-rename

[hendricius]

@jonricaurte how do you integrate this with your rails workflow? a quick example would be great :). thanks

[mikeover]

+1

[courtness]

+1

[iagopiimenta]

👍

[ghost]

A note in the README regarding this issue (until it is resolved) would help save a lot of time

[julianorinyol]

+1

[mikeborg]

Might as well try to fix it...running into issues implementing register_transformer. Any help would be appreciated. Thanks.

How to intercept '.html' requests in Rails using Sprockets >3.0 Transformers? (ie fix 'angular-rails-templates' gem) http://stackoverflow.com/questions/33701654/how-to-intercept-html-requests-in-rails-using-sprockets-3-0-transformers-i

[Saicheg]

+1 to get this fixed

[evgeny-myasishchev]

+1

[bramski]

+1

[rafaelfranca]

The @superchris's fork has the proper fix to this issue. It can be improved to not have to rename templates to nghtml but that is the right direction.

[paul-ihnatolia]

@superchris are you going to release your solution as a separate gem and add the support of slim and other preprocessors? I think it will be a perfect solution, because it seems that current gem is not going to bring a support of sprockets 3.+.

[ghost]

1. Add 'angular-rails-templates', '0.2.0'
2. Bundle install
3. Bundle update (Resolving dependencies, sprockets 2.12.4 (was 3.5.2), sprockets-rails 2.3.3 (was 3.0.0))
4. It works

[m2omou]

+1

[pitr]

Thanks everyone for encouragement, and especially thanks to work by @superchris I was able to take his branch and adapt it so that the gem works like it used to with sprocket 2, eg. no need to rename templates to .nghaml (see #126)

I am releasing version 1.0.0.beta1 which supports Sprocket 3 (Rails 4.2) and in about a week 1.0.0

[bmulholland]

@pitr Thanks for your work on this! Much appreciated.

[pitr]

Version v1.0.0 is out, supporting both Rails 4.2 and 5.0

[ericdegboe]

Version v1.0.0 It's work! Very nice!