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

Question

I'm trying to create a new setup for an app using jspm, systemjs and angular 1.5. I have a structure more or less like this:

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)

There is more, but this should suffice here. I'm testing the whole setup with some simple angular modules. I have an app module that has the homepage module as a dependency:

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

The homepage module in turn has a module with an angular component as a dependency:

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;

And the code for helloWorldCtrl:

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

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

export default HelloWorldCtrl;

And for helloWorldComponent:

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

export {helloWorldComponent as default};

Well, I have it sort of working, but not quite. The page loads, but I do not see the contents of the component template (helloWorld.html). I see the content of the template for the homepage, home.html:

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

Now this shows the home.name given in the homeCtrl (which is 'home'). However, the hello-world component is not rendered at all. I just see a hello-world element in the inspector. It is not replaced by the code from the helloWorld.html template. It should display the greeting-string defined in helloWorldCtrl in a h1-element. I had this component working when I used it in index.html and when I bootstrapped its own module. Now that I'm using it as a dependency on the homepage module however, it doesn't work well anymore. Any ideas what I may be missing here? I must have done something when refactoring, but I can't spot what.

Let me know if I need to provide more code.

Best regards, Martijn

Answer 1

The comment from @ShuheiKagawa was spot on. I had to change the name of the component to helloWorld (since I use hello-world in the html template where I insert the component), so:

.component('helloWorld', helloWorldComponent)