Javascript 角度组件不渲染模板

基于

UI路由器

（）我的Angular应用程序中有以下状态：

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>'
})

talentforceApp.component（'about'{
模板：“关于TalentForce”
})

当我运行它时，我的控制台不会给出任何错误。我检查了，状态和组件确实保存了。它只是无法渲染。当我点击我的应用程序的

About

按钮时，没有模板，只是空白，没有错误。因为没有错误，所以很难调试。我在这里遗漏了什么？

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

模板：“模板”
})

您很可能已经找到了解决方案，但它还是在这里

在本例中，所有组件都是同一角度模块（“hello”）的一部分，而您已将组件添加到单独的模块中

您需要将TalentForce_应用程序作为对主模块批准的依赖项添加到

 angular
    .module('appRoutes', ["ui.router", "talentforce"])
    ...

---

您的模块对于组件和模板是不同的