Angular Komponente rendert nicht Vorlage

Question

Basierend auf einem Tutorial von UI-Router (https://ui-router.github.io/ng1/tutorial/hellogalaxy) Ich habe diese Zustände in meinem Angular App:

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

Hier ist meine andere Datei ist, die Moduldeklaration enthalten:

'use strict'; 

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

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

Und die Datei für eine dieser einfachen Komponenten:

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

Wenn ich es ausführe, gibt meine Konsole keine Fehler. Ich habe überprüft und der Zustand und die Komponente ist tatsächlich gespeichert. Es wird einfach nicht gerendert. Wenn ich auf die About Schaltfläche meiner App klicke, gibt es keine Vorlage, nur leer und keine Fehler. Es ist schwer zu debuggen, da es keine Fehler gibt. Was fehlt mir hier?

Answer 1

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