Make angular-rails-templates work with Sprockets 3.0 #93

Closed
jonricaurte opened this Issue Apr 8, 2015 · 55 comments

Comments

Projects
None yet
@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

This comment has been minimized.

Show comment
Hide comment
@rafaelfranca

rafaelfranca Apr 8, 2015

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

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

@jonricaurte

This comment has been minimized.

Show comment
Hide comment
@jonricaurte

jonricaurte Apr 8, 2015

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

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

This comment has been minimized.

Show comment
Hide comment
@jonricaurte

jonricaurte Apr 9, 2015

Note: this doesn't watch for changes

Note: this doesn't watch for changes

@jonricaurte

This comment has been minimized.

Show comment
Hide comment
@jonricaurte

jonricaurte Apr 10, 2015

@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!

@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

This comment has been minimized.

Show comment
Hide comment
@jonricaurte

jonricaurte Apr 13, 2015

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'

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'

@sandelius

This comment has been minimized.

Show comment
Hide comment
@sandelius

sandelius Apr 16, 2015

tmp:clear is annoying like h*ll :/

tmp:clear is annoying like h*ll :/

@styx

This comment has been minimized.

Show comment
Hide comment

styx commented Apr 17, 2015

/CC

@Asciant

This comment has been minimized.

Show comment
Hide comment

Asciant commented Apr 22, 2015

+1

@bmulholland

This comment has been minimized.

Show comment
Hide comment

+1

@gottfrois

This comment has been minimized.

Show comment
Hide comment
@gottfrois

gottfrois Apr 24, 2015

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

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

@panzershreck

This comment has been minimized.

Show comment
Hide comment

+1

@ehahn9

This comment has been minimized.

Show comment
Hide comment
@ehahn9

ehahn9 Apr 26, 2015

+1 (to use sprockets transformers instead)

ehahn9 commented Apr 26, 2015

+1 (to use sprockets transformers instead)

davetron5000 added a commit to davetron5000/angular-rails-templates that referenced this issue Apr 26, 2015

Require sprockets < 3
Given that #93 is still open, requiring sprockets < 3 will at least prevent `bundle update` from breaking things
@pitr

This comment has been minimized.

Show comment
Hide comment
@pitr

pitr Apr 28, 2015

Owner

Thanks @davetron5000 for PR and everybody else for suggestions.

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

Owner

pitr commented Apr 28, 2015

Thanks @davetron5000 for PR and everybody else for suggestions.

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

@sandelius

This comment has been minimized.

Show comment
Hide comment
@sandelius

sandelius May 14, 2015

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.

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

This comment has been minimized.

Show comment
Hide comment
@sars

sars May 27, 2015

any updates regarding support sprockets 3?

sars commented May 27, 2015

any updates regarding support sprockets 3?

@jaybloke

This comment has been minimized.

Show comment
Hide comment

+1

@mcasimir

This comment has been minimized.

Show comment
Hide comment
@mcasimir

mcasimir Jun 8, 2015

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']);

mcasimir commented Jun 8, 2015

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

This comment has been minimized.

Show comment
Hide comment

+1

@Rodeoclash

This comment has been minimized.

Show comment
Hide comment

+1

@olegantonyan

This comment has been minimized.

Show comment
Hide comment

+1

@CompuIves

This comment has been minimized.

Show comment
Hide comment

+1

colinpetruno pushed a commit to colinpetruno/numbers that referenced this issue Jun 22, 2015

Colin Petruno
Deploy Cleanup
There were a few bugs relating to deploying that were causing blockers.
Gems to support Heroku had to be added, template urls needed changed to
support the rails gem for Angular templates to prevent Angular from
making http request.

There was also a sprockets imcompability here that required it downgraded.
pitr/angular-rails-templates#97
pitr/angular-rails-templates#93

colinpetruno pushed a commit to colinpetruno/numbers that referenced this issue Jun 22, 2015

Colin Petruno
Deploy Cleanup
There were a few bugs relating to deploying that were causing blockers.
Gems to support Heroku had to be added, template urls needed changed to
support the rails gem for Angular templates to prevent Angular from
making http request.

I didn't remove activerecord when bootstrapping the app. This caused
problems with deploying to heroku which does not support sql lite.

Had to update a few ng-controllers in order to make everything work
again after removing the main controller from Angular.

There was also a sprockets imcompability here that required it downgraded.
pitr/angular-rails-templates#97
pitr/angular-rails-templates#93
@lexi-lambda

This comment has been minimized.

Show comment
Hide comment

+1

@thontaddeo

This comment has been minimized.

Show comment
Hide comment

+1

@GarPit

This comment has been minimized.

Show comment
Hide comment

GarPit commented Jul 9, 2015

👍

@aidanhmiles

This comment has been minimized.

Show comment
Hide comment
@aidanhmiles

aidanhmiles Jul 9, 2015

@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.

@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

This comment has been minimized.

Show comment
Hide comment

bopm commented Jul 10, 2015

👍

@dreamsoftech

This comment has been minimized.

Show comment
Hide comment

👍

@pegasuspect

This comment has been minimized.

Show comment
Hide comment
@pegasuspect

pegasuspect Jul 12, 2015

👍🏼👍🏼🎉🎊

👍🏼👍🏼🎉🎊

@nanamiwang

This comment has been minimized.

Show comment
Hide comment

👍

@Go0Ns

This comment has been minimized.

Show comment
Hide comment

Go0Ns commented Jul 31, 2015

👍

@davetron5000

This comment has been minimized.

Show comment
Hide comment
@davetron5000

davetron5000 Jul 31, 2015

Contributor

I started to look into this, and I'm having a hard time getting started. I've read rails/sprockets#22 and https://github.com/rails/sprockets/blob/master/UPGRADING.md#transformers but I can't seem to figure out how that connects with this gem. Is this going to require a complete rewrite? I guess I have the time but not the expertise to try to fix this.

Contributor

davetron5000 commented Jul 31, 2015

I started to look into this, and I'm having a hard time getting started. I've read rails/sprockets#22 and https://github.com/rails/sprockets/blob/master/UPGRADING.md#transformers but I can't seem to figure out how that connects with this gem. Is this going to require a complete rewrite? I guess I have the time but not the expertise to try to fix this.

@superchris

This comment has been minimized.

Show comment
Hide comment
@superchris

superchris Aug 25, 2015

Collaborator

I have a proof of concept sprockets3 processor working in a fork: https://github.com/gaslight/angular-rails-templates

I had to go back to .nghtml and .nghaml extensions to make it work. This doesn't bother me at all, but if its a show stopper for others I may just release this code as a different gem. Any opinions?

Collaborator

superchris commented Aug 25, 2015

I have a proof of concept sprockets3 processor working in a fork: https://github.com/gaslight/angular-rails-templates

I had to go back to .nghtml and .nghaml extensions to make it work. This doesn't bother me at all, but if its a show stopper for others I may just release this code as a different gem. Any opinions?

@shybovycha

This comment has been minimized.

Show comment
Hide comment

👍

@mvarrieur

This comment has been minimized.

Show comment
Hide comment

👍

@jonricaurte

This comment has been minimized.

Show comment
Hide comment
@jonricaurte

jonricaurte Sep 11, 2015

An update on what I decided to do 5 months later and still no update. We decided to use gulp instead and that works better and gives us more control. Now our assets are compiled in 600 milliseconds and don't need rake tmp:clear

An update on what I decided to do 5 months later and still no update. We decided to use gulp instead and that works better and gives us more control. Now our assets are compiled in 600 milliseconds and don't need rake tmp:clear

@mvarrieur

This comment has been minimized.

Show comment
Hide comment
@mvarrieur

mvarrieur Sep 11, 2015

@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 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

This comment has been minimized.

Show comment
Hide comment
@jonricaurte

jonricaurte Sep 11, 2015

@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

@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

This comment has been minimized.

Show comment
Hide comment
@hendricius

hendricius Sep 29, 2015

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

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

jmoon90 added a commit to jmoon90/recipe-angular that referenced this issue Oct 6, 2015

@mikeover

This comment has been minimized.

Show comment
Hide comment

mikeover commented Oct 8, 2015

+1

@courtness

This comment has been minimized.

Show comment
Hide comment

+1

@iagopiimenta

This comment has been minimized.

Show comment
Hide comment

👍

@amyhua

This comment has been minimized.

Show comment
Hide comment
@amyhua

amyhua Nov 5, 2015

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

amyhua commented Nov 5, 2015

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

@julianorinyol

This comment has been minimized.

Show comment
Hide comment

+1

@mikeborg

This comment has been minimized.

Show comment
Hide comment
@mikeborg

mikeborg Nov 13, 2015

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

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

This comment has been minimized.

Show comment
Hide comment
@Saicheg

Saicheg Nov 17, 2015

+1 to get this fixed

Saicheg commented Nov 17, 2015

+1 to get this fixed

@evgeny-myasishchev

This comment has been minimized.

Show comment
Hide comment
@bramski

This comment has been minimized.

Show comment
Hide comment

bramski commented Nov 30, 2015

+1

@rafaelfranca

This comment has been minimized.

Show comment
Hide comment
@rafaelfranca

rafaelfranca Dec 4, 2015

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.

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

This comment has been minimized.

Show comment
Hide comment
@paul-ihnatolia

paul-ihnatolia Dec 9, 2015

@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.+.

@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.+.

Chryus added a commit to Chryus/watership-down that referenced this issue Dec 15, 2015

Merge branch 'master' of github.com:Chryus/watership-down
Angular on Rails 4.2.3 app, setup with bower-rails + angular-rails-templates. This app uses sprockets v2.12.3, as angular-rails-templates won't support v3. As a workaround you can delete angular-rails-templates and follow these steps: pitr/angular-rails-templates#93 (comment). This app will move to this format next.
@ghost

This comment has been minimized.

Show comment
Hide comment
@ghost

ghost Dec 24, 2015

  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

ghost commented Dec 24, 2015

  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

This comment has been minimized.

Show comment
Hide comment

m2omou commented Jan 20, 2016

+1

lphiri added a commit to redhataccess/foreman-plugin that referenced this issue Jan 26, 2016

@josephholsten josephholsten referenced this issue in davetron5000/angular-rails-book Jan 31, 2016

Open

consider angular-rails4-templates #43

@pitr pitr referenced this issue Feb 3, 2016

Merged

Sprocket 3 support #126

@pitr pitr closed this in #126 Feb 3, 2016

@pitr

This comment has been minimized.

Show comment
Hide comment
@pitr

pitr Feb 3, 2016

Owner

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

Owner

pitr commented Feb 3, 2016

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

This comment has been minimized.

Show comment
Hide comment
@bmulholland

bmulholland Feb 4, 2016

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

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

@pitr

This comment has been minimized.

Show comment
Hide comment
@pitr

pitr Feb 11, 2016

Owner

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

Owner

pitr commented Feb 11, 2016

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

@ericdegboe

This comment has been minimized.

Show comment
Hide comment
@ericdegboe

ericdegboe Mar 12, 2016

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

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

bunnymatic added a commit to bunnymatic/mau that referenced this issue May 30, 2018

bunnymatic added a commit to bunnymatic/mau that referenced this issue May 30, 2018

bunnymatic added a commit to bunnymatic/mau that referenced this issue May 30, 2018

bunnymatic added a commit to bunnymatic/mau that referenced this issue May 30, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment