AngularJS $ stateProvider не работает с компонентом

Я новичок как с ES6, так и с AngularJS, и у меня проблема с государственным провайдером (или с чем-то связанным с ним). Я пытаюсь создать приложение, следуя структуре проекта, представленной в репозитории GitHub, который я нашел:

https://github.com/AngularClass/NG6-starter

Проблема возникает, когда я пытаюсь назначить мой компонент состоянию $stateProvider.

Это код, который не работает:

import angular from 'angular';
import uiRouter from 'angular-ui-router';
import homepageComponent from './homepage.component';

const moduleName = 'app.components.homepage';

let homepageModule = angular.module(moduleName, [
  uiRouter
])
.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
  'ngInject';

  $stateProvider
    .state('homepage', {
      url: '/',
      component: 'homepage'
    });

  $urlRouterProvider.otherwise('/');
}])
.component('homepage', homepageComponent)
.name;

export default homepageModule;

Я мог предположить, что в приложении есть что-то еще не так, но когда я заменяю эту "компонентную вещь" базовыми заданиями, она работает нормально.

Код, который действительно работает:

import angular from 'angular';
import uiRouter from 'angular-ui-router';
import template from './homepage.html';
import controller from './homepage.controller';

const moduleName = 'app.components.homepage';

let homepageModule = angular.module(moduleName, [
  uiRouter
])
.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
  'ngInject';

  $stateProvider
    .state('homepage', {
      url: '/',
      restrict: 'E',
      bindings: {},
      template: template,
      controller: controller,
      controllerAs: '$ctrl'
    });

  $urlRouterProvider.otherwise('/');
}])
.name;

export default homepageModule;

И вот код homepage.component.js:

import template from './homepage.html';
import controller from './homepage.controller';
import './homepage.scss';

let homepageComponent = {
  restrict: 'E',
  bindings: {},
  template,
  controller
};

export default homepageComponent;

Когда я вставляю <homepage></homepage>, он просто работает. Может ли кто-нибудь рассказать мне, в чем разница между этими двумя способами и что я делаю неправильно?

КСТАТИ. Кто-нибудь знает, почему существует это .name в конце файлов (в репо)?