Lodash _.findIndex not working in tsd install lodash --save in angular2

Question

I have implemented lodash in two methods:

Method 1: I have Install in bower_component and make a declare var _:any; in components. Its working fine

In click event i am calling this function:

checkLodash() {
  _.forEach({ a: 1, b: 2 }, function (value, key) {
    console.log(key);
  });

  let a = _.findIndex(this.users, 'active');
  console.log(a);
}

Everything works fine. but I got this issue in production

EXCEPTION: ReferenceError: _ is not defined

I got some solution from here [https://stackoverflow.com/questions/36171727/lodash-in-angular2-declare-var-any-not-working][link]

Method 2: In my app there is no systemjs because i am using [seed-app][1], so i have used
tsd install lodash --save and

import * as _ from 'lodash';

I am calling this function in click event

constructor() {
  this.show_data = 'hello';
  this.users = [
    { user: 'barney', active: false },
    { user: 'fred', active: false },
    { user: 'pebbles', active: true },
  ];
  _.forEach({ a: 1, b: 2 }, function (value, key) {
    console.log(key);
  });
}

checkLodash() {
  _.forEach({ a: 1, b: 2 }, function (value, key) {
    console.log(key);
  });

  let a = _.findIndex(this.users, 'active');
  console.log(a);
}

Now my output is : a b (in console.log) If I click button to call checkLodash function, I am getting this error,

EXCEPTION: Error during evaluation of "click"
ORIGINAL EXCEPTION: TypeError: _.findIndex is not a function
browser_adapter.js:76 TypeError: _.findIndex is not a function
    at LodashWithoutDeclare.checkLodash (lodash-without-declare.ts:31)
    at AbstractChangeDetector.ChangeDetector_LodashWithoutDeclare_0.handleEventInternal (viewFactory_LodashWithoutDeclare:75)
    at AbstractChangeDetector.handleEvent (abstract_change_detector.js:57)
    at AppView.triggerEventHandlers (view.js:221)
    at eval (viewFactory_LodashWithoutDeclare:130)
    at dom_renderer.js:282
    at dom_events.js:28
    at ZoneDelegate.invoke (angular2-polyfills.js:332)
    at Object.NgZoneImpl.inner.inner.fork.onInvoke (ng_zone_impl.js:44)
    at ZoneDelegate.invoke (angular2-polyfills.js:331)

How to fix this issue?

score 0 · Answer 1 · answered Apr 14 '16 at 21:29

0

Check your lodash distribution, i guess its not full build, just core.

answered Apr 14 '16 at 21:29

kemsky

14,727
3
32
51

yes it was not updated code. it is old version i think so – Deepak Apr 15 '16 at 04:24

score 0 · Answer 2 · edited Nov 28 '20 at 11:31

tsd is depricated. Use this way

npm install lodash --save
typings install lodash --ambient --save

before that make sure you install typings globally

npm install typings -g

Then in your angular-cli-build.json, make sure it remains like this way

module.exports = function(defaults) {
  return new Angular2App(defaults, {
    vendorNpmFiles: [
      ...
      'lodash/**/*.js'
    ]
  });
};

and in your system-config.ts:


/** Map relative paths to URLs. */
const map: any = {
  'lodash': 'vendor/lodash/lodash.js'
};

/** User packages configuration. */
const packages: any = {
  'lodash': {
    format: 'cjs'
  }
};

in your src/index.html add this line

<script src="/vendor/lodash/lodash.js" type="text/javascript"></script>

now in your component where you want to use lodash , write this way

declare var _:any;
    
@Component({
})
export class YourComponent {
  ngOnInit() {
    console.log(_.chunk(['a', 'b', 'c', 'd'], 2));
  }
}

it worked for me :)

Lodash _.findIndex not working in tsd install lodash --save in angular2

2 Answers2