Correct way of importing and using lodash in Angular

I used to be able to use a lodash method in Angular by an import statement that looked like the following:

import {debounce as _debounce} from 'lodash';

I now get the following error when using that statement:

'"{...}/node_modules/@types/lodash/index"' has no exported member 'debounce'.

The only thing that will compile without errors is this statement:

import * as _ from 'lodash'; 

In my code, I change _debounce() to _.debounce(). Is that the only (and/or correct) way to do it? Is there a way to only import debounce, or does it not matter due to "treeshaking"? I realize I can write my own debounce function, but I'm mainly interested in the "right" way to do this.

p.s. Other variations that I've tried (each has some sort of error associated with it):

import {debounce as _debounce } from 'lodash/debounce';
import * as _debounce from 'lodash/debounce';
import debounce = require('lodash/debounce');

FYI...I'm using the following versions:

Angular: 2.4.5

Typescript: 2.1.5

Angular-cli: 1.0.0-beta.26

Solution 1:

(if you care about tree shaking see update)
I suppose in order to bring lodash in to your project you already done

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

If you want to import just required functions you should do:

import * as debounce from 'lodash/debounce'

or

import { debounce } from "lodash";

Use it as:

debounce()

BTW: You might have to downgrade your typescript version to 2.0.10 as you are using angular 2.x.

npm install [email protected] --save-dev

UPDATE:

Recently I realised that lodash package is just not tree shakable, so if you need tree shaking just use lodash-es instead.

npm install lodash-es --save
npm install @types/lodash-es --save-dev

import debounce from 'lodash-es/debounce'

Solution 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(_.random(1, 100)); //lodash function
  }

}

Solution 3:

This solved it for me, as written under "updated" by Kuncevič and edited by Roy

yarn add lodash-es
yarn add @types/lodash-es --dev

import { debounce as _debounce } from 'lodash';

I had to import the es-modules, else I was given compilation errors - most likely due to my configuration (tsconfig.json).

Solution 4:

I've tried different approaches to reduce lodash size in bundle and while the updated answer by Kuncevič works my bundle still includes non-es lodash (my guess it's because it's required by some other dependency) so at this point I dont think it makes sense adding lodash-es at all or importing functions separately from 'lodash'. From what I understand npm does deduplication and moves lodash to top-level folder (node_modules) that's why it's there even after I removed it from package.json and reinstalled node_modules. Webpack doesn't care about package.json and if it sees that lodash is imported by anyone - bundles it.