AngularJS, RequireJS and components after bootstrapping

Question

I have a problem with my Environment of AngularJS, RequireJS and later loaded components.

requirejs.config({
    paths: {
        'angular': ['//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min']
    },
    shim: {
      angular: { exports: 'angular' },
    }
});

define('testComponent', ['angular'], function(angular) {
  angular.module('heroApp').component('test', {
    template: '<span>Thank you very much!</span>'
  });
});

require(['angular'], function(angular) {
  angular.module('heroApp', []).controller('MainCtrl', function MainCtrl() {
    this.hero = {
      name: 'Spawn'
    };
  });

  angular.module('heroApp').component('heroDetail', {
    template: '<span>Name: {{$ctrl.hero.name}}</span>',
    bindings: {
      hero: '='
    }
  });
  
  angular.bootstrap(document, ['heroApp']);
  
  require(['testComponent'], function() {});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.5/require.min.js"></script>
<div ng-controller="MainCtrl as ctrl">
  <b>Hero</b><br />
  <hero-detail hero="ctrl.hero"></hero-detail><br /><br />
  <b>And something else:</b><br />
  <test>This should go away...</test>
</div>

In my real environment I have a lot of controllers, directives, services, etc. and everything loads fine. I require the dependencies and they will loaded. But since I want to use components it stops working.

So before / working: Using controllers, directives, services, etc. and load the things if they needed.

Now / not working: Added components and load this only if needed.

Answer 1

Your components were working. See your top one -- heroDetail. You didn't define the test component correctly.

https://jsfiddle.net/6uy4crrm/