在模块b中使用模块a中的Angular 1.5组件（使用ES2015）

Question

我正在尝试使用 jspm、systemjs 和 Angular 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>

现在显示了 homeCtrl 中给出的 home.name（即“home”）。然而，hello-world 组件根本没有渲染。我只在检查器中看到一个 hello-world 元素。它不会被 helloWorld.html 模板中的代码替换。它应该在 h1 元素中显示 helloWorldCtrl 中定义的问候字符串。当我在 index.html 中使用它以及引导它自己的模块时，我让这个组件正常工作。现在我将它用作主页模块的依赖项，但它不再工作得很好了。我在这里可能缺少什么想法吗？我一定在重构时做了什么，但我看不出是什么。

如果我需要提供更多代码，请告诉我。

最诚挚的问候， 马丁

Answer 1

@ShuheiKakawa 的评论很到位。我必须将组件的名称更改为 helloWorld（因为我在插入组件的 html 模板中使用 hello-world），所以：

.component('helloWorld', helloWorldComponent)