Error: _.get is not a function

Question

I'm trying to implement angular-timezone-selector [on Github] into my existing angular project.

I created a decoupled working plunker here

When I tried to implement it into my project, I receive the following error:

Error: _.get is not a function

These are my dependencies:

var app = angular.module('app',
  [
    'ngSanitize',
    'ui.router',
    'ui.bootstrap',
    'pascalprecht.translate',
    'tmh.dynamicLocale',
    'ngCookies',
    'angular-loading-bar',
    'google.places',
    'LocalStorageModule',
    'angular-timezone-selector'
  ]
);

This is what I loaded into my html:

  <!-- jQuery first -->
  <script src="assets/bower_components/jquery/dist/jquery.min.js"></script>
  <script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
  <script src="assets/bower_components/moment/moment.js"></script>
  <script src="assets/bower_components/moment-timezone/builds/moment-timezone-with-data.js"></script>
  <script src="assets/bower_components/chosen/chosen.jquery.min.js"></script>
  <script src="assets/bower_components/lodash/lodash.min.js"></script>

  <!-- Angular specific scripts -->
  <script src="assets/bower_components/angular/angular.js"></script>
  <script src="assets/bower_components/angular-cookies/angular-cookies.js"></script>
  <script src="assets/bower_components/angular-sanitize/angular-sanitize.js"></script>
  <script src="assets/bower_components/underscore/underscore.js"></script>
  <script src="assets/bower_components/angular-resource/angular-resource.js"></script>
  <script src="assets/bower_components/angular-local-storage/dist/angular-local-storage.js"></script>
  <script src="assets/bower_components/angular-ui-router/release/angular-ui-router.js"></script>
  <script src="assets/bower_components/angular-ui-bootstrap-bower/ui-bootstrap-tpls.js"></script>
  <script src="assets/bower_components/angular-translate/angular-translate.js"></script>
  <script src="assets/bower_components/angular-translate-loader-static-files/angular-translate-loader-static-files.js"></script>
  <script src="assets/bower_components/angular-dynamic-locale/dist/tmhDynamicLocale.js"></script>
  <script src="assets/bower_components/angular-loading-bar/build/loading-bar.js"></script>
  <script src="assets/bower_components/angular-google-places-autocomplete/src/autocomplete.js"></script>
  <script src="assets/bower_components/angular-timezone-selector/angular-timezone-selector.js"></script>
  <script src="scripts/app.js"></script>

...

This a part of my bower.json file, which provides my assets:

...
    "moment": "2.11.1",
    "moment-timezone": "0.5.0",
    "chosen": "1.4.2",
    "lodash": "3.9.3",
    "angular-timezone-selector": "1.4.3"
...

Maybe this is a lodash error. How can I fix this issue?

Answer 1

  angular.module('lodash', []).factory('_', ['$window', function ($window) {
    return $window._;
  }]);

  angular.module('yourApp', [
    // angular
    'ngAnimate',
    'ngCookies',
    // angular ui
    'ui.router',
    'ui.bootstrap',
    'ui.validate',
    // third party
     'angular-loading-bar',
    'lodash'
  ]);

then inject it into your service or controller.