title: Angular component does not render template
body: <p>Based on a tutorial from <code>UI-Router</code>
   (<a href="https://ui-router.github.io/ng1/tutorial/hellogalaxy" rel="nofollow noreferrer">https://ui-router.github.io/ng1/tutorial/hellogalaxy</a>) I have these states in my Angular app:</p>
  
  <pre><code>angular
      .module('appRoutes', ["ui.router"])
      .config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
  
      // An array of state definitions
      var states = [
        { name: 'home', url: '/', component: 'home' },
        { name: 'about', url: '/about', component: 'about' },
  
      ]
  
      // Loop over the state definitions and register them
      states.forEach(function(state) {
        console.log(state.component)
        $stateProvider.state(state);
      });
  
      $urlRouterProvider.otherwise('/');
  }]);
  </code></pre>
  
  <p>Here is my other file that contain module declaration:</p>
  
  <pre><code>'use strict';
  
  var talentforceApp = angular.module("talentforce", []);
  
  angular
      .module('TalentForce_Application', [
          'appRoutes',
          'talentforce',
          'ngResource'
      ]);
  </code></pre>
  
  <p>And the file for one of those simple components:</p>
  
  <pre><code>talentforceApp.component('about', {
    template:  '&lt;h3&gt;About TalentForce&lt;/h3&gt;'
  })
  </code></pre>
  
  <p>When I run it, my console gives no errors. I checked and the state and component is indeed saved. It just doesn't render. When I click the <code>About</code> button of my app, there is no template, just blank and no errors. It is hard to debug since there are no errors. What am I missing here?</p>