在模块 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)

还有更多，但这应该足够了。我正在使用一些简单的 angular 模块测试整个设置。我有一个将主页模块作为依赖项的应用程序模块：

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']);

主页模块反过来有一个模块有一个 angular 组件作为依赖：

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

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

.component('helloWorld', helloWorldComponent)

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

Use angular 1.5 component from module a in module b (using ES2015)

angularjs

angularjs-directive

ecmascript-6

jspm

angular-module