Используйте угловой компонент 1.5 из модуля a в модуле b (с использованием ES2015)

Question

Я пытаюсь создать новую установку для приложения с помощью jspm, systemjs и углового 1.5. У меня есть структура более или менее:

src 
    common (pieces common to entire app, some services, images, etc) 
    components (separate components of the app that have their own js, scss, html, etc.) 
    pages (views that are coupled to routes. They may contain components or common code) 

Существует больше, но этого должно быть достаточно. Я тестирую всю установку с помощью некоторых простых угловых модулей. У меня есть модуль приложения, который имеет модуль домашней страницы в качестве зависимости:

import angular from 'angular'; 
import home from 'pages/home/home'; 
// import other common stuff here. Directives, services, etc. that are shared over different pages. 
// import other pages here 

angular.module('app', [home]); 

angular.bootstrap(document.getElementById('app'), ['app']); 

Модуль домашней страницы в своей очереди, имеет модуль с угловым компонентом как зависимость:

import angular from 'angular'; 
import helloWorldComponent from './helloWorldComponent'; 
import helloWorldCtrl from './helloWorldCtrl'; 

let helloWorld = angular.module('helloWorld', []); 

helloWorld.controller('helloWorldCtrl', helloWorldCtrl) 
    .component('components.helloWorld', helloWorldComponent); 

export default helloWorld.name; 

И код для helloWorldCtrl:

class HelloWorldCtrl { 
    constructor() { 
     this.greeting = 'Welcome to ' + this.name + "'s world!"; 
    } 
} 

HelloWorldCtrl.$inject = []; // Inject dependencies here 

export default HelloWorldCtrl; 

И helloWorldComponent:

const helloWorldComponent = { 
    bindings: { 
     name: '@' 
    }, 
    controller: 'helloWorldCtrl as helloWorld', 
    templateUrl: '/components/helloWorld/helloWorld.html' 
}; 

export {helloWorldComponent as default}; 

Ну, у меня это работает, но не совсем. Страница загружается, но я не вижу содержимое шаблона компонента (helloWorld.html). Я вижу содержимое шаблона для домашней страницы, home.html:

<p>{{home.name}}</p> 
<div id="im-hello-world"> 
    <hello-world name="Daan"></hello-world> 
</div> 

Теперь это показывает home.name приведенного в homeCtrl (который является «домом»). Однако компонент hello-world вообще не отображается. Я просто вижу в инспекторе элемент приветствия. Он не заменяется кодом из шаблона helloWorld.html. Он должен отображать строку приветствия, определенную в helloWorldCtrl в h1-элементе. Я работал над этим компонентом, когда использовал его в index.html, и когда я загрузил свой собственный модуль. Теперь, когда я использую его как зависимость от модуля главной страницы, он больше не работает. Какие-нибудь идеи, что мне здесь не хватает? Я должен был что-то сделать, когда рефакторинг, но я не могу понять, что.

Сообщите мне, если мне нужно предоставить больше кода.

С наилучшими пожеланиями, Мартейн

Answer 1

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

.component('helloWorld', helloWorldComponent)