module pattern angularjs 1.5 not registering the components

Am trying to use modulePattern in angularjs appication. (1.5) but had to do the 2nd approach as per the code given below to make it work. seems I can't get the component s properly isolated. What Am I missing here?

my index.js entry point to the app

import registerFooterTemplate from './footerBar/footerBar';

const app = angular.module('app', [uirouter])

registerFooterTemplate(app);

MY COMPONENT footerBar.js

import footerTemplate from './footer.html';

// ********** TRYING TO USE MODULE PATTERN HERE **************
// -- This doesn't work---------------
// const mod = angular.module('budgetTracker.footerBar', [

// ]);

// mod.component('footerBar',{
//   template: footerTemplate,
//   bindings: {},
//   controllerAs: 'vm',
//   controller: function($state) {}
// });

// export default mod.name;

// **************************************************************


// THIS Works -----
export default ngModule => {
  ngModule.component('footerBar', {
    template: footerTemplate,
    controllerAs: 'vm',
    controller: function($state) {}
  });
}