Reputation: 2581
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
Upvotes: 76
Views: 100104
Reputation: 3126
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
}
}
Importing lodash's particular package(lodash.includes
)
step-1: Install the particular package(lodash.includes
) and its type definition package as well.
npm i lodash.includes
npm i -D @types/lodash.includes
step-2: You can use it where you want as shown below.
import { Component, OnInit } from '@angular/core';
import { includes } from 'lodash';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
title = 'test-lodash-includes';
ngOnInit() {
console.log((includes['a', 'b', 'c', 'd'], 'b')); //lodash'includes package' usage
}
}
Upvotes: 15
Reputation: 28309
(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'
Upvotes: 150
Reputation: 480
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).
Upvotes: 6
Reputation: 11
I had same problem and it started to work after I changed "@types/lodash" to version "4.14.50".
Upvotes: 0