Угловой компонент не делает шаблон

Question

на основе учебника из UI-Router (https://ui-router.github.io/ng1/tutorial/hellogalaxy) У меня есть эти состояния в моем угловом приложении:

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('/'); 
}]); 

Вот мой другой файл, который содержит модуль декларацию:

'use strict'; 

var talentforceApp = angular.module("talentforce", []); 

angular 
    .module('TalentForce_Application', [ 
     'appRoutes', 
     'talentforce', 
     'ngResource' 
    ]); 

И файл для одного из этих простых компонентов:

talentforceApp.component('about', { 
    template: '<h3>About TalentForce</h3>' 
}) 

Когда я запускаю его, моя консоль не дает никаких ошибок. Я проверил, и состояние и компонент действительно сохранены. Он просто не отображает. Когда я нажимаю кнопку About моего приложения, нет шаблона, просто пустого и нет ошибок. Его трудно отлаживать, поскольку ошибок нет. Что мне здесь не хватает?

Answer 1

angular.module('appRoutes').component('about', { 
    template: '<h3>Template</h3>' 
})