Error with angular when trying to use with latest version(0.9.3)

[ghost]

AngularJS throws an error when latest files are included:
Error: $injector:undef
Undefined Value
Provider 'HeadroomService' must return a value from $get factory method.

[WickyNilliams]

Could you create a fiddle (or pen or bin or whatever) to demonstrate the issue?

[moosi]

+1

I simply added headroom above the tab bar: https://plnkr.co/edit/b6panE?p=info

[moosi]

Are there any updates on this issue?

[sandor11]

Have no idea if this is helpful, or not but I just hacked this up in the last 15 mins. I had problems after minification, but was getting the same error you are seeing. Don't know if this will work for you.

/*!
 * headroom.js v0.9.3 - Give your page some headroom. Hide your header until you need it
 * Copyright (c) 2016 Nick Williams - http://wicky.nillia.ms/headroom.js
 * License: MIT
 */

(function (angular) {

  if(!angular) {
    return;
  }

  function hFactory() {
    return {
        headroom: function() {return window.Headroom;}
    };
  }

  function headroom(HeadroomFactory) {
    return {
      scope: {
        tolerance: '=',
        offset: '=',
        classes: '=',
        scroller: '@'
      },
      link: function ($scope, $element) {
        var head = HeadroomFactory.headroom();
        var options = {};
        var opts = head.options;
        for (var prop in opts) {
          options[prop] = $scope[prop] || opts[prop];
        }
        if ($scope.scroller) {
          options.scroller = document.querySelector($scope.scroller);
        }
        var headroom = new head($element[0], options).init();
        $scope.$on('$destroy', function(){
          headroom.destroy();
        });
      }
    };
  }

  headroom.$inject = ['HeadroomFactory'];

  angular
    .module('headroom', [])
    .directive('headroom', headroom)
    .factory('HeadroomFactory', hFactory);

})(window.angular);

[moosi]

Any updates regarding this issue?

[jenyckee]

+1

[shibanovp]

This happens because window.Headroom is undefined. Make sure you've loaded headroom.js

[rwoody]

I'm using CommonJS modules (Webpack 2) and I had this same issue.

When CommonJS/AMD is used, the window.Headroom does not get populated, so the Angular module breaks. To solve this I used the imports-loader for Webpack to force this to be window and set define and exports to false to prevent the module style stuff from executing:

In webpack.config.js:

rules: [
  {
    test: require.resolve('headroom.js'),
    use: 'imports-loader?this=>window,define=>false,exports=>false'
  }
]

In app.js:

import 'headroom.js'
import 'headroom.js/dist/angular.headroom'

// ...

angular.module('MyApp', ['headroom'])

[mcblum]

@rwoody any idea how this would look in Webpack 1? I seem to be having the same issue but cannot figure it out!

[mcblum]

update: fixed it for anyone who may need this code:

 // expose Headroom
 new webpack.ProvidePlugin({
    'window.Headroom': 'headroom.js/dist/headroom.js'
})

[WickyNilliams]

Closing in favour of #333, which will look at all angular issues