Compile templates in the browser

I have a specific use-case where I need to compile a template in the browser. That is because the template is not available at development-time.

import Ember from 'ember';
const myTempRouteList = ['home']; // this is retrieved from the backend

export function initialize(instance) {
  let container = instance.container;
  let Router = container.lookupFactory('router:main');

  myTempRouteList.forEach(function (name) {
    let routeName = name.dasherize();

    Router.map(function(){ // router.map is undefined here
      this.resource(routeName, {path: routeName});
    });
    container.register(`route:${routeName}`, Ember.Route.extend({}));
    container.register(`template:${routeName}`, Ember.HTMLBars.compile(`I am the template of ${routeName}`);

  }, this);
}

export default {
  name: 'register-routes',
  initialize: initialize
};

I run it and it is giving the following error: Uncaught Error: Cannot call 'compile' without the template compiler loaded. Please load 'ember-template-compiler.js' prior to calling 'compile'.

So I added this to my Brocfile.js:

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

However, the error is still present.

The versions I use: - Ember 1.13.3 - Ember-cli 1.13.1