Using lodash in Angular 4

Question

I have previously used lodash in my Angular 4 application by simply importing it and using it as shown here:

import lodash from 'lodash';  public getSubtotal() : number {   return lodash.sumBy(this.cartItems, function(item) {             return item.product.price * item.item.quantity;   }) 

}

I am once again trying to use lodash similarly but am getting an error that lodash is undefined.

import lodash from 'lodash';  lodash.indexOf([1, 2, 1, 2], 2); 

I get the following error:

ERROR TypeError: Cannot read property 'indexOf' of undefined at CustomizeComponent.showTopping (customize.component.ts:39) at Object.eval [as updateDirectives] (CustomizeComponent.html:285) at Object.debugUpdateDirectives [as updateDirectives] (core.js:14638) at checkAndUpdateView (core.js:13785) at callViewAction (core.js:14136) at execComponentViewsAction (core.js:14068) at checkAndUpdateView (core.js:13791) at callViewAction (core.js:14136) at execEmbeddedViewsAction (core.js:14094) at checkAndUpdateView (core.js:13786) 

Answer 1

First you need to install the packages lodash and @types/lodash (contains type definitions):

npm i lodash npm i --save-dev @types/lodash 

Then you can use lodash e.g. with import * as _ from 'lodash'; and further do _.indexOf([1, 2, 1, 2], 2);

You could also do import * as _isEmpty from 'lodash/isEmpty'; (thanks to joshrathke) or import {isEmpty} from 'lodash';

Answer 2

Importing lodash or any javascript library inside angular:

step-1: Install the libarary(lodash)

npm i --save lodash 

step-2: import it inside the component and use it.

import it as follow:

import 'lodash';  declare var _:any; 

or

import * as _ from 'lodash'; 

Step-3: Install type definitions for Lo-Dash (it's optional)

npm install --save-dev @types/lodash 

see the example if you still have doubts

import { Component, OnInit } from '@angular/core'; // import * as _ from 'lodash'; import 'lodash';  declare var _:any;  @Component({   selector: 'app-root',   templateUrl: './app.component.html',   styleUrls: ['./app.component.css'] }) export class AppComponent implements OnInit {   title = 'test-lodash';    ngOnInit() {     console.log(_.chunk(['a', 'b', 'c', 'd'], 2)); //lodash function     console.log(_.indexOf([1, 2, 1, 2], 2)); //lodash function   }  }