title: How do I get AngularJs UI-Router to load components for AngularJs 1.6.1 app
body: <p>I have followed the documentation on the UI-Router site to the point that my code for configuring the $StateProvider is practically identical, but I cannot get my Components to load.  I am able to see the html pages referenced in my templateUrl but the controllers are not being accessed.  Also, when I provide a Controller reference in the state route it errors suggesting that the controller is not register</p>
  
  <p>The first component on the index page:</p>
  
  <pre><code>&lt;supply-chain-admin ng-cloak&gt;&lt;/supply-chain-admin&gt;
  
  (function () {
  "use strict"
  
  var module = angular.module("SCAdmin");
  
  function AppController($timeout) {
  
      var vm = this; // vm = ViewModel
      vm.isNewBlankLoad = false;
      vm.selectedMenuItem;
      vm.changeMenu = true;
  
      vm.$onInit = function () {
          vm.changeMenu = true;
      }
  
      vm.collapseMainMenu = function (isCollapsed) {
          vm.changeMenu = isCollapsed;
          $timeout(function () { equalheight('.menuListItem'); }, 10);
      };
  }
  
  module.component("supplyChainAdmin", {
      templateUrl: "/Scripts/SupplyChainAdmin/SCAdminApp/SupplyChainAdmin.html",
      bindings: {
      },
      controllerAs: "vm",
      controller: ['$timeout', AppController]
  });
  </code></pre>
  
  <p>})();</p>
  
  <p>The inside this components html file:</p>
  
  <pre><code>&lt;main-menu show-menu="vm.changeMenu"&gt;&lt;/main-menu&gt;
  &lt;main-content show-menu="vm.changeMenu"&gt;&lt;/main-content&gt;
  </code></pre>
  
  <p>Inside the main-menu component:</p>
  
  <pre><code>&lt;div id="menuleft" ng-class="{hideMenu:!vm.showMenu,slide:vm.showMenu}"&gt;
  &lt;div id="mainMenuHeader"&gt;
      &lt;a class="pull-right" id="mainMenuToggleLink" ng-click="vm.toggleMenu()"&gt;
          &lt;img src="/Content/images/menu.png" /&gt;
      &lt;/a&gt;
  &lt;/div&gt;
  &lt;div id="mainMenu"&gt;
      &lt;ul class="menuList" ng-class="{hideMenu:vm.showMenu,slide:!vm.showMenu}"&gt;&lt;!-- the :: symbol represents one time binding --&gt;
          &lt;li title="{{ ::menuItem.ToolTip }}" class="menuListItem" ng-repeat="menuItem in vm.menuItems" ng-class="{ active: menuItem.Link == vm.selectedMenuItem }" resize-normal&gt;
              &lt;button class="menuNotifications pull-right" ng-show="menuItem.Notification.length" popover="{{ ::menuItem.NotificationMessage }}" popover-trigger="focus" popover-placement="right" popover-append-to-body="true"&gt;{{ ::menuItem.Notification }}&lt;/button&gt;
              &lt;a ng-click="vm.menuItemChanged(menuItem.Link)" ui-sref="{{ ::menuItem.Link }}"&gt;
                  &lt;h1 ng-show="vm.showMenu"&gt;&lt;span class="{{ ::menuItem.MenuIconClass }}"&gt;&lt;/span&gt; {{ ::menuItem.Title }} &lt;i class="line"&gt;&lt;/i&gt;&lt;/h1&gt;
                  &lt;p ng-hide="vm.showMenu"&gt;&lt;span class="{{ ::menuItem.MenuIconClass }}"&gt;&lt;/span&gt; &lt;i class="line"&gt;&lt;/i&gt;&lt;/p&gt;
  
                  &lt;div class="menuItemContent" ng-class="{hide:!vm.showMenu}"&gt;
                      &lt;ul class="list-unstyled list-inline"&gt;
                          &lt;li ng-repeat="pointItem in menuItem.MenuItemPoints"&gt;
                              &lt;div class="fa large-glyphicon {{ ::pointItem.IconClass }}" aria-hidden="true"&gt;&lt;/div&gt;
                              &lt;div class="menuSubItemText"&gt;&amp;nbsp;{{ ::pointItem.DisplayText }}&amp;nbsp;&lt;/div&gt;
                              &lt;div class="menuSubItemValue"&gt;&amp;nbsp;{{ ::pointItem.DisplayValue }}&amp;nbsp;&lt;/div&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
              &lt;/a&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>(function () {
  "use strict"
  
  var module = angular.module("SCAdmin");
  
  module.component("mainMenu", {
      templateUrl: "/Scripts/SupplyChainAdmin/MainMenu/MainMenu.html",
      bindings: {
          showMenu: "="
      },
      controllerAs: "vm",
      controller: ["$http", '$timeout', '$state', mainMenuController]
  });
  
  function mainMenuController($http, $timeout, $state) {
  
      var vm = this; // vm = ViewModel
  
      vm.isNewBlankLoad = false;
      vm.menuItems = [];
  
      vm.selectedMenuItem;
  
      vm.$onInit = function () {
          fetchMenuItems($http, $state).then(function (data) {
              if (data.length) {
  
                  for (var i = 0, l = data.length; i &lt; l; i++) {
                      if (data[i].MenuItemType === 1) {
  
                          vm.menuItems.push({ Link: 'Items', ToolTip: 'Items', Title: 'My Items', MenuItemType: 1, Notification: data[i].Notification, NotificationMessage: data[i].NotificationMessage, MenuItemPoints: data[i].MenuItemPoints, MenuIconClass: 'fa fa-tags' });
                      }
                      if (data[i].MenuItemType === 2) {
                          vm.menuItems.push({ Link: 'Vendors', ToolTip: 'Vendor', Title: 'My Vendors', MenuItemType: 2, Notification: data[i].Notification, NotificationMessage: data[i].NotificationMessage, MenuItemPoints: data[i].MenuItemPoints, MenuIconClass: 'fa fa-id-card' });
                      }
                      if (data[i].MenuItemType === 3) {
                          vm.menuItems.push({ Link: 'Facilities', ToolTip: 'Facilities', Title: 'My Facilities', MenuItemType: 2, Notification: data[i].Notification, NotificationMessage: data[i].NotificationMessage, MenuItemPoints: data[i].MenuItemPoints, MenuIconClass: 'fa fa-university' });
                      }
                      if (data[i].MenuItemType === 4) {
                          vm.menuItems.push({ Link: 'Departments', ToolTip: 'Departments', Title: 'My Departments', MenuItemType: 2, Notification: data[i].Notification, NotificationMessage: data[i].NotificationMessage, MenuItemPoints: data[i].MenuItemPoints, MenuIconClass: 'fa fa-bed' });
                      }
                      if (data[i].MenuItemType === 5) {
                          vm.menuItems.push({ Link: 'Pars', ToolTip: 'Pars', Title: 'My PARs', MenuItemType: 2, Notification: data[i].Notification, NotificationMessage: data[i].NotificationMessage, MenuItemPoints: data[i].MenuItemPoints, MenuIconClass: 'fa fa-stethoscope' });
                      }
                      if (data[i].MenuItemType === 6) {
                          vm.menuItems.push({ Link: 'Maintenance', ToolTip: 'Maintenance', Title: 'Maintenance', MenuItemType: 2, Notification: data[i].Notification, NotificationMessage: data[i].NotificationMessage, MenuItemPoints: data[i].MenuItemPoints, MenuIconClass: 'fa fa-wrench' });
                      }
                  }
  
                  vm.selectedMenuItem = $state.current.name != null ? $state.current.name : vm.menuItems[0].ToolTip;
              }
          });
      };
  
      vm.menuItemChanged = function (selectMenuItem) {
          vm.selectedMenuItem = selectMenuItem;
      }
  
      vm.menuItems = vm.menuItems;
  
      vm.toggleMenu = function () {
          vm.showMenu = (vm.showMenu) ? false : true;
          $timeout(function () { equalheight('.menuListItem'); }, 10);
      }
  }
  
  function fetchMenuItems($http) {
      return $http.get(SupplyChainAdminUrl + 'Menu/GetMenuItems/', { params: { domain: CurrentUserDomain, userName: CurrentUserUserName } }).then(function (response) {
          return response.data;
      });
  }
  </code></pre>
  
  <p>})();</p>
  
  <p>Inside the main-content component:</p>
  
  <pre><code>&lt;div id="contentFromMenu" ng-class="{hideMenu:vm.showMenu,slide:!vm.showMenu}"&gt;
  &lt;div class="overlay" ng-class="{show:vm.showMenu}" ng-click="vm.collapseMenu()"&gt;&lt;/div&gt;
  &lt;div id="menuContentContainer"&gt;
      &lt;ui-view&gt;&lt;/ui-view&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>(function () {
  
  "use strict"
  
  var module = angular.module("SCAdmin");
  
  module.component("mainContent", {
      templateUrl: "/Scripts/SupplyChainAdmin/MainContent/MainContent.html",
      require: {
          'parent': '^supplyChainAdmin'
      },
      bindings: {
          showMenu: "&lt;"
      },
      controllerAs: "vm",
      controller: ["$http", '$timeout', mainContentController]
  
  });
  
  function mainContentController($timeout) {
  
      var vm = this; // vm = Viewvm
  
      vm.$onInit = function () {
  
      }
  
      vm.collapseMenu = function () {
          //the parameter sets the show menu property to false;
          vm.parent.collapseMainMenu(false);
      };
  };
  </code></pre>
  
  <p>})();</p>
  
  <p>The router which is inside the app.js module file:</p>
  
  <pre><code>(function () {
  "use strict";
  
  var app = angular.module("SCAdmin", ['ui.router', 'ui.bootstrap', 'jQueryScrollbar', 'ngSanitize', 'angular.vertilize']);
  
  app.config(function ($stateProvider, $urlMatcherFactoryProvider, $urlRouterProvider, $locationProvider) {
  
      $urlRouterProvider.otherwise('/Items');
      $urlMatcherFactoryProvider.caseInsensitive(true);
      $locationProvider.html5Mode(true);
  
      $urlRouterProvider.rule(function ($injector, $location, $window, $timeout) {
  
          //We can write authorization / part access checks here.
  
          //what this function returns will be set as the $location.url
          var path = $location.path(), normalized = path.toLowerCase();
  
          if (path != normalized) {
  
              //alert(path);
  
              //instead of returning a new url string, I'll just change the $location.path directly so I don't have to worry about constructing a new url string and so a new state change is not triggered
              //$location.replace().path(normalized);
          }
  
          // because we've returned nothing, no state change occurs
      });
  
      $stateProvider
          .state('Items', {
              url: '/Items',
              component: 'items',
              templateUrl: '/Scripts/SupplyChainAdmin/Items/Items.html',
              //onEnter: function(){
              //    alert('entering the Items state');
              //}
          })
          .state('Vendors', {
              url: '/Vendors',
              component: 'Vendors',
              templateUrl: '/Scripts/SupplyChainAdmin/Vendors/Vendors.html',
          })
          .state('Vendors.VendorList', {
              url: '/List',
              templateUrl: '/Scripts/SupplyChainAdmin/Vendors/List/VendorList.html'
          })
          .state('Facilities', {
              url: '/Facilities',
              component: 'facilities',
              templateUrl: '/Scripts/SupplyChainAdmin/Facilities/Facilities.html',
          })
          .state('Departments', {
              url: '/Departments',
              component: 'departments',
              templateUrl: '/Scripts/SupplyChainAdmin/Departments/Departments.html',
          })
          .state('Pars', {
              url: '/Pars',
              component: 'pars',
              templateUrl: '/Scripts/SupplyChainAdmin/Pars/Pars.html',
          })
          .state('Maintenance', {
              url: '/Maintenance',
              component: 'maintenance',
              templateUrl: '/Scripts/SupplyChainAdmin/Maintenance/Maintenance.html',
          });
  })
  
  app.run(function ($rootScope, $timeout) {
      $rootScope.$on('$stateNotFound', function (event, unfoundState, fromState, fromParams) {
          event.preventDefault();
      });
      $rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams, options) {
          $rootScope.stateIsLoading = true;
      });
      $rootScope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState, fromParams, options) {
          $timeout(function () { $rootScope.stateIsLoading = false; }, 300);
      });
      $rootScope.$on('$stateChangeError', function (event, toState, toParams, fromState, fromParams, error) {
          event.preventDefault();
          $timeout(function () { $rootScope.stateIsLoading = false; }, 300);
      });
      $rootScope.$on('$viewContentLoading', function (event, viewConfig) {
          //$rootScope.stateIsLoading = true;
      });
      $rootScope.$on('$viewContentLoaded', function (event, viewConfig) {
          //$rootScope.stateIsLoading = false;
      });
  })
  </code></pre>
  
  <p>}());</p>
  
  <p>I am aware that the nested routes are not correctly configured.  My focus is on the "Items" state for this post.  The html loads, but the component does not.</p>