pitr / angular-rails-templates

Use your angular templates with rails' asset pipeline
https://rubygems.org/gems/angular-rails-templates
MIT License
566 stars 169 forks source link

Templates not getting wrapped in expected javascript #136

Open peternixey opened 8 years ago

peternixey commented 8 years ago

The following problem is definitely not a problem with the gem as we have this running correctly on our staging and other development servers. Please feel free to close it immediately if you don't have any ideas as to what it may be as it's definitely an issue with my development machine. On the off-chance that you do though I wanted to just float it.

For some reason, on my local machine, rails-templates is not wrapping the normal javascript around the templates themselves. Instead of compiling into something like:

// Angular Rails Template
// source: app/assets/javascripts/copyin/directives/fast_reply/fast_reply_template.html.haml

angular.module("templates").run(["$templateCache", function($templateCache) {
  $templateCache.put("copyin/directives/fast_reply/fast_reply_template.html", "<a class='{{fastReplyType}}' data-original-title='{{actionTooltip}}' href='' ng-class='{active: fastReplyIdForCurrentUser}' ng-click='toggleAction()' tooltip='tooltip'>\n  {{actionName}}\n  <span ng-if='fastReplyUsersFullNames.length &gt; 0'>\n    ({{fastReplyUsersFullNames.length}})\n  </span>\n</a>")
}]);

The templates are simply compiling to:

<a class='{{fastReplyType}}' data-original-title='{{actionTooltip}}' href='' ng-class='{active: fastReplyIdForCurrentUser}' ng-click='toggleAction()' tooltip='tooltip'>
  {{actionName}}
  <span ng-if='fastReplyUsersFullNames.length &gt; 0'>
    ({{fastReplyUsersFullNames.length}})
  </span>
</a>
;

Have you ever seen this before? Do you have any immediately have any thoughts as to what config setting could be causing this? If not don't sweat it but I thought it was worth asking

Thank you.

pitr commented 8 years ago

Nope, but the semicolon at the end of that template is quite strange

peternixey commented 8 years ago

Yep. It must be down to some package dependency that's gone weird on El Capitan. If (it had better be when) I find out I'll post it back here

willhoney7 commented 8 years ago

I'm seeing this as well on my Mac running El Capitan. Any updates?

fiscal-cliff commented 8 years ago

I do think that you have to check the paths once again. If you have set wrong template locations you would got caught in described situation. So double check your config.

willhoney7 commented 8 years ago

So I had been using sprockets 2.x and angular-rails-templates 0.1.3 (yeah, I know) and updated to sprockets 3.x and found that I needed to update angular-rails-templates as well. It worked perfectly before the upgrade, but now does the bug the OP talks about.

I just changed my gem to 'angular-rails4-templates' and it works perfectly... Do you still think it has to do with the paths?

fiscal-cliff commented 8 years ago

I might to be wrong. But recently I ran into the same debug session. And in my case it was just wrong paths. And even strange semicolon appeared as described above. I suggest to ensure that processor for ng html registered properly.

willhoney7 commented 8 years ago

Hmm, I'll look into it more when I get a chance. For now I've had to go back to the old versions I was using. Thanks for your help!

DarkArc commented 8 years ago

I'm seeing this as well moving from version .2 to 1.0.

Edit: I'm also on Ubuntu 14.04, not OSX.

peternixey commented 8 years ago

Ok so I managed to fix this but ended up finding two different ways that actually addressed it.


1. On some versions add the inside_paths option

I keep a blank rails project to try these things out independently of everything in our application. This was running a very slightly different combo of angular-templates and sprockets

Gem versions in my blank project

Sprockets 2.12.4
Angular-Rails-templates 0.2.0

With this combination, inside_paths fixed it immediately

Adding config.angular_templates.inside_paths = ['app/assets'] to application.rb immediately fixed the issue and the templates came out sweetly.

2. On older versions of angular-rails-templates you just need to upgrade...

Gem versions in our production project

sprockets 2.12.3
angular-rails-templates 0.1.4

With this combination, adding the config option config.angular_templates.inside_paths = ['app/assets'] did not unfortunately fix the problem.

However upgrading to

sprockets 3.6.0
angular-rails-templates 1.0.0

Did fix it. Success.

Learnings from my experiments

See how up-to-date you can get. If you can't get completely up-to-date then try adding the config option in

DarkArc commented 8 years ago

I found my issue as well. We were using Rails.root.join to declare our sub directories, it appears v1.0.0 doesn't respect absolute paths.

willhoney7 commented 8 years ago

Per @DarkArc's comment, I looked into the sub directories. I was able to get it working properly after using the inside_paths config. We currently have our frontend in a separate folder from app. It used to work without the inside_paths config on 0.1.3 but seems to be required now on 1.0.0. Not sure if that's a bug or intended... but this got it to work.

    config.assets.paths << Rails.root.join('app_ui')
    ...
    config.angular_templates.inside_paths = ['app_ui']
pitr commented 8 years ago

@peternixey could you post an empty Rails project or instructions on how to set it up to duplicate this issue? I have never seen this issue myself.

peternixey commented 8 years ago

@pitr Sure. I've put it onto https://github.com/Copyin/blank_rails.

  1. Download and bundle install
  2. Check out angular_rails_broken branch
  3. Visit http://localhost:5000/assets/templates/test.js?body=1 to see the issue.
  4. The head of master has the issue fixed again.

Lastly can you ping me once you've got it as I'll make the repo private again. ta.

pitr commented 8 years ago

I still can't replicate. Following your instructions I get:

$ curl "http://localhost:5000/assets/templates/test.js?body=1"
// Angular Rails Template
// source: app/assets/javascripts/templates/test.html

angular.module("templates").run(["$templateCache", function($templateCache) {
  $templateCache.put("test.html", "<div> This is a test </div>")
}]);
peternixey commented 8 years ago

Apologies. I should have explained that it is definitely system dependent. My colleague who was running exactly the same repo did not have the issue.

I don't know how best to snapshot but I'm happy to send you versions of dependent brew installations etc if that would help?

Sent from my iPhone

On Apr 25, 2016, at 8:07 AM, ☃ pitr notifications@github.com wrote:

I still can't replicate. Following your instructions I get:

$ curl "http://localhost:5000/assets/templates/test.js?body=1" // Angular Rails Template // source: app/assets/javascripts/templates/test.html

angular.module("templates").run(["$templateCache", function($templateCache) { $templateCache.put("test.html", "

This is a test
") }]); — You are receiving this because you were mentioned. Reply to this email directly or view it on GitHub

jorgeants commented 8 years ago

Thanks @peternixey.

For me, it worked: https://github.com/pitr/angular-rails-templates/issues/136#issuecomment-211537845

arruah commented 7 years ago

Any progress with this issue?

anicholson commented 7 years ago

Hit this today. @DarkArc 's hypothesis was correct for me, too :)

willhoney7 commented 3 years ago

Hit this today, again, 5+ years later. I had no memory of this but grateful for things like this sticking around!