Correct way of importing and using lodash in Angular

(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 --savenpm 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 --savenpm install @types/lodash-es --save-devimport debounce from 'lodash-es/debounce'

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  }}

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

yarn add lodash-esyarn add @types/lodash-es --devimport { 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).