Angular-cli: angular cli lodash third party installed but not work.

[karthikkavin]

How to use lodash in angular cli.
import always results in an error 'cannot find module lodash'. But the lodash successfully build to dist/vendor folder.
import _ from 'lodash';

Can you advise?

[iamyojimbo]

Have you tried import * as _ from 'lodash'?

[masaanli]

@hansl can u look to this?

1. Installed 'npm install lodash --save'
2. Then I tried to import it, but it keeps saying 'cannot find module' (TSLint)

What is the correct way to include LoDash with Angular CLI Webpack?

[iamyojimbo]

I got it to work with webpack using var lodash = require('lodash')
Looks ugly to mix require and include but works perfectly.

[masaanli]

@iamyojimbo getting the error: cannot find name require.

[kylecordes]

We are currently in the middle of a frustrating (and probably long) transition and tension between the traditional JavaScript community and those of us who prefer to have types available everywhere. When you install something like lodash above, I suspect it does not come with its own types. However, types are available from third party. You may get the results you want, and be able to use lodash easily from typescript, with as little as this one command:

npm install --save-dev @types/lodash

Then you should be able to get a hold of it in code:

import * as _ from "lodash";

However, I don't have a sample project in front of me as I type this, maybe someone who has been down this specific path recently can confirm and tweak the details.

[masaanli]

@kylecordes after that, stil getting module not found. I can see the interface and stuff inside node_modules@types/lodash

[kylecordes]

@masaanli I remembered it being very easy when I did this on a real project a few days ago. So just now I tried again on a tiny fig project. It was just as easy as I remember. See results in the repo below.

https://github.com/kylecordes/a2-cli-webpack-lodash-example

You can see the changes to use lodash in the following commit. It really could hardly be easier, kudos to the CLI team on this.

https://github.com/kylecordes/a2-cli-webpack-lodash-example/commit/80734bb354eed2b751ce1c7a49aa8575aa6846fb

[masaanli]

@kylecordes i did exactly what u did also tried to remove all node_modules and did npm install again.

Keep getting the error. => cannot found module lodash

I'm having also your versions.

ng-bootstrap is working for example.

If you want I can send you an email then you can look together with me to see it.

[sonicparke]

@masaanli I also did what @kylecordes said and I also get cannot found module lodash on the import statement but when I use lodash in the file it works correctly. So it "kinda" works but just thinks it can't find it.

[masaanli]

@sonicparke @kylecordes

It is working as u said.

Got no intellisense, getting a tslint error.

Using VSCode (Insiders and Standard), both having the same problem...

[kylecordes]

Here's is another wild guess. That your typescript or lint are somehow an older version. I don't have time to work on my repo for this right now, maybe someone else familiar with the stuff can help.

[Sixthdim]

For Visual Studio Code users, just add this to your project's workspace settings:
"typescript.tsdk": "./node_modules/typescript/lib"
Then reload VS. This will get VS on the correct version of TS (2.0).

[kylecordes]

The setting @Sixthdim described, is exactly what I've done at the project level (not workspace level) for my projects that use TS 2.

[masaanli]

@kylecordes How did u do it at project level?
You mean the settings.jso inside .vscode in the project?

P.s. did the fix now in workspace level and it is working.

[kylecordes]

Oh, sorry, I misspoke. I was thinking about a different IDE to use where workspace has a different meaning, and IDE where a workspace contains multiple projects. Here on VSCode, indeed I adjusted this at the workspace level. It is very easy, just open up the workspace settings and paste in the line of JSON from @Sixthdim .

[masaanli]

This topic can be closed then, was a Visual Studio issue (Typescrip Version).

[filipesilva]

I'm closing this issue as it appears to have been solved, but am leaving this related issue here as well https://github.com/angular/angular-cli/issues/1717.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}