Unrecognized Expression

[claudiolassala]

Trying to get the gem to work on a project here, but having an issue. My templateUrl on a directive is set like:

templateUrl: '<%= asset_path("my_template.html") %>'

When running the app, I get this error:

error: Syntax error, unrecognized expression: angular.module('templates').run([
  '$templateCache',
  function ($templateCache) {
    $templateCache.put('immigrant_lookup.html', '< div >Test< /div >');
  }
]);
    at Function.Sizzle.error (jquery-adf2ef0edd3fe9d391567ca13dbaa589.js?body=1:713)
    at Sizzle.tokenize (jquery-adf2ef0edd3fe9d391567ca13dbaa589.js?body=1:1122)
    at Sizzle.select (jquery-adf2ef0edd3fe9d391567ca13dbaa589.js?body=1:1364)
    at Function.Sizzle [as find] (jquery-adf2ef0edd3fe9d391567ca13dbaa589.js?body=1:420)
    at jQuery.fn.extend.find (jquery-adf2ef0edd3fe9d391567ca13dbaa589.js?body=1:1512)
    at jQuery.fn.init (jquery-adf2ef0edd3fe9d391567ca13dbaa589.js?body=1:1572)
    at jQuery (jquery-adf2ef0edd3fe9d391567ca13dbaa589.js?body=1:24)
    at removeComments (angular-77980acff285dcb845bac391dba7725d.js?body=1:3872)
    at angular-77980acff285dcb845bac391dba7725d.js?body=1:3557
    at processQueue (angular-77980acff285dcb845bac391dba7725d.js?body=1:6988)

However, I tried pasting that expression it's complaing about it in my app.js file:

angular.module('templates').run([
  '$templateCache',
  function ($templateCache) {
    $templateCache.put('immigrant_lookup.html', '< div >Test< /div >');
  }
]);

That way it works fine...

Any idea about what's going on here would be highly appreciated.

[pitr]

I believe it's related to spaces in your <div> tags. At least according to this stackoverflow question - https://stackoverflow.com/questions/14347611/jquery-client-side-template-syntax-error-unrecognized-expression

[claudiolassala]

I've put the spaces just so I could post it here, otherwise github was messing up with the content. I forgot to mention that.

[pitr]

If you are still having this issue, can you post version of angular, jquery and this gem?

[claudiolassala]

Sure, here you go...

angularjs-rails (1.4.8) jquery-rails (4.1.0) angular-rails-templates (0.2.0)

[pitr]

Ah, I see now. jQuery is trying to treat that javascript code angular.module('templates').run(... as html, because templateUrl: '<%= asset_path("my_template.html") %>' resolves to templateUrl: '/assets/my_template.JS'.

To fix this, you need to do templateUrl: 'my_template.html', see step 4 in readme. That's the point of this gem, instead of having angular fetch templates after the app is loaded, your templates come bundled with your javascript

[claudiolassala]

Thanks for following up!

I've tried your suggestion, but I'm getting the "failed to load template" error (attached image)

Now, tried again like this:

templateUrl: '<%= asset_path("immigrant_lookup.html") %>'

The template renders and my directive works just fine. However, the html gets rendered very funky:

Any idea?

[pitr]

Yeah, you definitely do not want templateUrl: '<%= asset_path("foo.html") %>'. That treats javascript (that has your template in it) as HTML, and it happens to work sometimes, sort of, but not really.

Have you done step 2, ie adding something like require_tree ./templates to your application.js? Your application should not be making requests to http://localhost:3000/service_orders/immigrant_lookup.html, that template should already be downloaded

[claudiolassala]

duh!! I had required angular-rails-templates, but totally missed requiring the templates path... :(

Thank you so much for helping me with this!