Issue
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
(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'
Answered By - angularrocks.com
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.