Template registration issue

application.controller.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName:'Ember Twiddle',
  
  myComponentName: null,
  
  actions: {
    registerComponent() {
      let template = Ember.Handlebars.compile('<b>First x-foo</b>');
      Ember.myAppInstance.register('template:components/x-foo', template );
      this.set('myComponentName', 'x-foo');
    },
  	changeTemplate() {			
      this.set('myComponentName', null);
      Ember.myAppInstance.unregister('template:components/x-foo');
      
      let newTemplate = Ember.Handlebars.compile('<b>New x-foo</b>');
      Ember.myAppInstance.register('template:components/x-foo', newTemplate );
      
      setTimeout(() => {
      	this.set('myComponentName', 'x-foo');
      }, 500)
      
    }
  }  
});

application.template.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<button {{action "registerComponent"}}>Register Template</button>
<br><br>
{{# if myComponentName}}
<button {{action "changeTemplate"}}>Change Template</button>
{{/if}}
<br><br>
{{component myComponentName}}
{{outlet}}
<br>
<br>

initializers.foo.js

import Ember from 'ember';

export function initialize(app) {
  Ember.myAppInstance = app;
  console.log('loaded myAppInstance on Ember from initializers/foo.js')
}

export default {
  name: 'foo',
  initialize
};

twiddle.json

{
  "version": "0.5.0",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.2.0/ember.debug.js",
    "ember-data": "https://cdnjs.cloudflare.com/ajax/libs/ember-data.js/2.2.0/ember-data.js",
    "ember-template-compiler": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.2.0/ember-template-compiler.js"
  }
}