Ember.js: HtmlBars and the Handlebars.compile command

Question

I get the following error when running my app:

Uncaught Error: Cannot call `compile` without the template compiler loaded. Please load `ember-template-compiler.js` prior to calling `compile`.

It is related to this piece of code:

var CarouselView = Ember.View.extend({
    template: Ember.Handlebars.compile('{{view view.itemsView}}'),
    elementId: 'carousel',
    contentBinding: 'content',
    ...

There is already an issue related about this problem on ember.js github: https://github.com/emberjs/ember.js/issues/10265

However I added ember-template-compiler to my package.json and got the same error again.

I did: npm install --save-dev ember-template-compiler

Here are my package.json devDependencies:

 "ember-cli": "0.1.10",
 "ember-cli-app-version": "0.3.0",
 "ember-cli-content-security-policy": "0.3.0",
 "ember-cli-dependency-checker": "0.0.7",
 "ember-cli-htmlbars": "^0.6.0",
 "ember-cli-ic-ajax": "0.1.1",
 "ember-cli-inject-live-reload": "^1.3.0",
 "ember-cli-qunit": "0.3.0",
 "ember-cli-simple-auth": "^0.7.2",
 "ember-cli-simple-auth-cookie-store": "^0.7.2",
 "ember-cli-simple-auth-oauth2": "^0.7.2",
 "ember-cli-uglify": "1.0.1",
 "ember-data": "1.0.0-beta.12",
 "ember-export-application-global": "^1.0.0",
 "ember-template-compiler": "^1.8.0",
 "express": "^4.8.5",
 "glob": "^4.0.5"

Reference: the ember-template-compiler github page

Anyone has experience with HtmlBars and the compile command?

score 16 · Answer 1 · answered Feb 10 '15 at 23:05

16

Since Ember.js 1.10 template compiler is part of Ember, so all you have to do to compile templates in client side is to add following line in your Brocfile:

app.import('bower_components/ember/ember-template-compiler.js');

answered Feb 10 '15 at 23:05

Ralfp

480
5
10

where to add these line when i find the Brocfile in Ember 2.0 i got 3 file /home/nesh/paint/node_modules/ember-cli-content-security-policy/Brocfile.js And the One is /home/nesh/paint/node_modules/ember-cli-babel/Brocfile.js – Nitesh singh Jan 31 '16 at 18:34
i was try add line in these 2 file but i got the same issue – Nitesh singh Jan 31 '16 at 18:36

score 11 · Accepted Answer · answered Jan 29 '15 at 13:19

11

You are trying to compile HTMLBars template on the client, however adding ember-template-compiler in package.json only enables precompilation of HTMLBars templates server-side.

To enable client-side compilation, you should add ember-template-compiler to the bower.json, e.g. (use appropriate version)

"ember-template-compiler": "http://builds.emberjs.com/tags/v1.10.0-beta.3/ember-template-compiler.js"

and then include it in Brocfile.js,

app.import('bower_components/ember-template-compiler/index.js');

answered Jan 29 '15 at 13:19

jesenko

1,273
12
18

That did the trick! However why this is never documented on the internet? I create a Github issue about the eventual documentation for this. – DelphiLynx Jan 29 '15 at 13:25
Could you please add the link to that issue? – Oliver Feb 04 '15 at 12:53
Background info: http://emberjs.com/blog/2015/02/05/compiling-templates-in-1-10-0.html – Jacob van Lingen Apr 03 '15 at 07:14
Hi this is still ocurring for me despite following the instructions above. link to my issue -> http://stackoverflow.com/questions/31240763/ember-js-please-load-ember-template-compiler-js-prior-to-calling-compile – Shivam Sinha Jul 06 '15 at 08:13
hey which brocfilte you are taking .plz help – Nitesh singh Feb 06 '16 at 10:14

score 1 · Answer 3 · answered Jun 25 '15 at 20:50

For my views, I just created template files for them. To use your case as an example, I would create app/templates/views/carousel.hbs:

{{view view.itemsView}}

Then CarouselView becomes:

var CarouselView = Ember.View.extend({
  templateName: 'views/carousel',
  elementId: 'carousel',
  contentBinding: 'content',
  ...

This way you don't have to give the client the template compiler. Should result in better performance and a smaller payload for the client to download.

Ember.js: HtmlBars and the Handlebars.compile command

3 Answers3

Linked