Reputation: 4684
I'm using Angular 6.x.x
in my project with the following lodash
dependency.
"dependencies": {
"@angular/common": "6.0.9",
"@angular/core": "6.0.9",
...
"@types/lodash": "^4.14.114",
...
},
Both of the following import are not working for me.
import _ from 'lodash';
import * as _ from 'lodash';
Upvotes: 2
Views: 4624
Reputation: 1806
The solution is to:
{"esModuleInterop": true}
to your .tsconfig
"@types/lodash"
in your devDependencies
In short:
Typescript has a different default import
mechanism compare to ES6 default.
For examples, you can import a function from a module either by:
Import as a whole:
import _ from 'lodash';
const results = _.uniq([1, 1, 2, 3]);
Import just a part:
import {uniq} from 'lodash';
const results = _.uniq([1, 1, 2, 3]);
However, in Typescript it gives you some syntax sugar for 2. Import a part
, which looks like this:
// This is valid in Typescript
import uniq from 'lodash';
const results = _.uniq([1, 1, 2, 3]);
Which is nice but makes 1 Import as a whole
not inferrable. By adding esModuleInterop
it can make the default ES6 behavior work again.
More details was mentioned here in another thread: Is there a way to use --esModuleInterop in tsconfig as opposed to it being a flag?
Upvotes: 3
Reputation: 4684
It seems like the following import was working perfectly fine. I had issues with my environment. After deleting the node_modules
directory and installing it, it worked.
import * as _ from 'lodash';
Upvotes: 6
Reputation: 20230
You need to install the lodash library.
"@types/lodash" are the lodash type definitions which are required to use lodash with typescript.
To install lodash run:
npm i --save lodash
in a terminal.
Upvotes: 1