# Dynamic template compilation in Ember 3.7

**URL:** <https://discuss.emberjs.com/t/dynamic-template-compilation-in-ember-3-7/16210>\
**Category:** Uncategorized\
**Created:** [February 21, 2019, 6:32pm UTC](https://discuss.emberjs.com/t/dynamic-template-compilation-in-ember-3-7/16210 "2019-02-21T18:32:28Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![jgadbois](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/jgadbois/32/9854_2.png) [@jgadbois](https://discuss.emberjs.com/u/jgadbois)\
**Post date:** [February 21, 2019, 6:32pm UTC](https://discuss.emberjs.com/t/dynamic-template-compilation-in-ember-3-7/16210/1 "2019-02-21T18:32:29Z")

</div>

We’re dynamically compiling Handlbars templates by importing the template-compiler in ember-cli-build.

```auto
  app.import('node_modules/ember-source/dist/ember-template-compiler.js');

```

This still works in Ember 3.7, but the file is now ES6 in Ember 3.7 which we’re not targeting. Is there any other way to do this where the file will get transpiled down to the same target as the app code?

---

<div class="post-metadata">

**Author:** ![dknutsen](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/dknutsen/32/16471_2.png) [@dknutsen](https://discuss.emberjs.com/u/dknutsen)\
**Post date:** [February 21, 2019, 7:04pm UTC](https://discuss.emberjs.com/t/dynamic-template-compilation-in-ember-3-7/16210/2 "2019-02-21T19:04:29Z")

</div>

@jgadbois sorry I don’t have a great answer for you right offhand but I my guess is you could configure ember-cli-babel to transpile that dependency manually (since it’s not a standard ember addon). Maybe using transpileTree? That’s not my forte but I’d imagine there’s some way to do it.

On another note I was curious what method you use to render the templates.

I’m currently doing something like this:

```auto
const { TEMPLATES, HTMLBars } = Ember;
...
      let compiled = HTMLBars.compile(`${this.get('templateContent')}`);
      TEMPLATES[<templatename>] = compiled;

```

and then rendering like so:

```auto
{{partial <templatename>}}

```

But from what I understand the partial helper will be deprecated soon. Are you aware of any better/more modern ways to render runtime compiled templates?

---

<div class="post-metadata">

**Author:** ![rwjblue](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/rwjblue/32/9411_2.png) [@rwjblue](https://discuss.emberjs.com/u/rwjblue)\
**Post date:** [February 21, 2019, 8:50pm UTC](https://discuss.emberjs.com/t/dynamic-template-compilation-in-ember-3-7/16210/3 "2019-02-21T20:50:48Z")

</div>

In Ember 3.7 the Ember dist/ changed a bit so that we could emit both a “evergreen browser” build and a “legacy browser” build. If your project’s targets include browsers older than the current set of evergreen browsers, you need to use the “legacy browser” build of the template compiler.

Something like:

```nohighlight
app.import('node_modules/ember-source/dist/legacy/ember-template-compiler.js');

```

---

<div class="post-metadata">

**Author:** ![jgadbois](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/jgadbois/32/9854_2.png) [@jgadbois](https://discuss.emberjs.com/u/jgadbois)\
**Post date:** [February 21, 2019, 10:01pm UTC](https://discuss.emberjs.com/t/dynamic-template-compilation-in-ember-3-7/16210/4 "2019-02-21T22:01:10Z")

</div>

Perfect, thanks so much!