Correct way of importing and using lodash in Angular

Question

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\';


        

Answer 1

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).

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

}

Answer 3

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.

Answer 4

(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 typescript@2.0.10 --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'

Answer 5

I had same problem and it started to work after I changed "@types/lodash" to version "4.14.50".