Importing lodash functions globally in Angular 4 app

Question

I'm trying to optimise my Angular 4 application by importing lodash functions globally to the app.module.ts. I tried:

import { some } from 'lodash/fp/some';
import _ from 'lodash/wrapperLodash';

However, I can't get the reference to that function in a component. This will throw an error:

_.some(myVar, { lat: null });

My dependencies (the ones related to the topic):

"devDependencies": {
"@angular/compiler": "^4.2.4",
"@angular/core": "^4.2.4",
"@types/lodash": "^4.14.104",
"lodash": "^4.17.5",
"typescript": "~2.3.3"
}

Error:

ERROR TypeError: __WEBPACK_IMPORTED_MODULE_0_lodash_fp_wrapperLodash___default.a.some is not a function

import * as _ from 'lodash'; in this context, 'lodash' will be the npm package — rrd, Mar 06 '18 at 11:23
That way you are importing the whole package. what I'm trying to achieve is to reduce the size of my vendor bundle. — Quang, Mar 06 '18 at 11:26
Ahh so you want to be specific and just bring some in, ok fair enough. — rrd, Mar 06 '18 at 11:28
Ok. So I'm getting kind of error
lodash_wrapperLodash___default.a.find is not a function — Quang, Mar 06 '18 at 11:31
If you only want 'some', you should do: import { some } from 'lodash'; — rrd, Mar 06 '18 at 11:56
Posible duplicate https://stackoverflow.com/questions/43479464/how-to-import-single-lodash-function — zelda11, Mar 06 '18 at 13:23
Could you please give some example of why you\re using lodash? — andrey.shedko, Mar 06 '18 at 16:01
I need those functions: camelCase, cloneDeep, flatten, forEach, includes, some, last, get, mapKeys, toNumber, truncate, union, uniq. — Quang, Mar 06 '18 at 16:31

zelda11 · Answer 1 · 2018-03-06T11:50:42.773

1

I still don't understand why people use lodash with all posibilities that ES6 already has.

https://www.sitepoint.com/lodash-features-replace-es6/

But if you want to use it, try to import it in this way:

import * as _ from "lodash";

import * as _ from "lodash"; Please note that If you use import _ from “lodash”, you will receive following error that “Module ‘lodash’ has no default export”:

From https://hassantariqblog.wordpress.com/2016/10/15/angular2-import-lodash-into-angular2-application-using-typescript/

Or for just one function of lodash:

import wrapperLodash from 'lodash/wrapperLodash';

edited Mar 06 '18 at 11:50

answered Mar 06 '18 at 11:44

zelda11

425
2
7

Unfortunately, this is to import the whole library. I need to import only particular function and need to do it globally (only once). – Quang Mar 06 '18 at 11:49
Try this 'import wrapperLodash from 'lodash/wrapperLodash';' – zelda11 Mar 06 '18 at 11:50
'_' refers to a UMD global, but the current file is a module. Consider adding an import instead. – Quang Mar 06 '18 at 11:54
https://stackoverflow.com/questions/43479464/how-to-import-single-lodash-function – zelda11 Mar 06 '18 at 11:54
exactly... and there is no aswer to this topic. – Quang Mar 06 '18 at 11:57
Any other suggestions? – Quang Mar 06 '18 at 12:44
I think that if this stackoverflow link I sent you is not answering your question means that your question is not well related. – zelda11 Mar 06 '18 at 13:21

Importing lodash functions globally in Angular 4 app

1 Answers1