Angular2 cannont find Lodash Module

Question

I'm having a hard time with import of lodash module.

I went to that solution here but it still not working I still have the error "cannon find module "lodash"".

I tried to remove dependencies and reinstall them using npm install and it does not change anything.

import "lodash" works but import * as _ from "lodash" does not.. I checked and lodash Is installed

Here is my package.json:

{
  "name": "newddeskclient",
  "version": "0.0.0",
  "dependencies": {
    "@angular/common": "2.0.0",
    "@angular/compiler": "2.0.0",
    "@angular/core": "2.0.0",
    "@angular/forms": "2.0.0",
    "@angular/http": "2.0.0",
    "@angular/platform-browser": "2.0.0",
    "@angular/platform-browser-dynamic": "2.0.0",
    "@angular/platform-server": "2.0.0",
    "@angular/router": "3.0.0",
    "@types/node": "^6.0.38",
    "angular2-datatable": "^0.6.0",
    "angular2-in-memory-web-api": "0.0.20",
    "angular2-platform-node": "~2.0.10",
    "angular2-universal": "~2.0.10",
    "angular2-universal-polyfills": "~2.0.10",
    "aspnet-prerendering": "^1.0.6",
    "aspnet-webpack": "^1.0.11",
    "bootstrap": "^3.3.7",
    "core-js": "^2.4.1",
    "css": "^2.2.1",
    "css-loader": "^0.25.0",
    "es6-shim": "^0.35.1",
    "expose-loader": "^0.7.1",
    "extract-text-webpack-plugin": "^1.0.1",
    "file-loader": "^0.9.0",
    "isomorphic-fetch": "^2.2.1",
    "jquery": "^2.2.1",
    "lodash": "^4.17.4",
    "preboot": "^4.5.2",
    "raw-loader": "^0.5.1",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.12",
    "style-loader": "^0.13.0",
    "systemjs": "0.19.27",
    "to-string-loader": "^1.1.5",
    "ts-loader": "^0.8.2",
    "typescript": "^2.0.0",
    "url-loader": "^0.5.7",
    "webpack": "^1.12.14",
    "webpack-externals-plugin": "^1.0.0",
    "webpack-hot-middleware": "^2.10.0",
    "webpack-merge": "^0.14.1",
    "zone.js": "^0.6.21"
  },
  "devDependencies": {
    "@types/lodash": "^4.14.62", 
    "typescript": "^2.0.2",
    "typings": "^1.3.2",
    "gulp": "^3.9.1",
    "path": "^0.12.7",
    "gulp-clean": "^0.3.2",
    "gulp-concat": "^2.6.0",
    "gulp-typescript": "^2.13.6",
    "gulp-tsc": "^1.2.0"
  }
}

Are there any solution to solve this problem?

[EDIT]

Here is my tsconfig.json :

{
  "compilerOptions": {
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "module": "commonjs",
    "noEmitOnError": true,
    "noImplicitAny": false,
    "outDir": "../Scripts/AppClient",
    "removeComments": false,
    "sourceMap": true,
    "target": "es5",
    "moduleResolution": "node"
  },
  "exclude": [
    "node_modules",
    "typings/index",
    "typings/index.d.ts"
  ]
}

have you added loadash reference in tscofig.json file as you are using @tyeps/lodash? — micronyks, Apr 13 '17 at 09:01
Thx for answering so fast ! No I did not is it something like that to add : "./typings/lodash/lodash.d.ts", ? — Sam Caneau, Apr 13 '17 at 09:04
`{ "compilerOptions": { "types" : ["node", "lodash"] } }`. just add `lodash` entry in `tyeps` array of `tsconfig` file and it should work — micronyks, Apr 13 '17 at 09:10

score 0 · Answer 1 · answered Apr 13 '17 at 09:03

0

Make sure that you installed by checking the lodash folder in the node_modules. Then install typings using the command

typings install lodash

Systemjs.config.js : Add the below items

 map: {
  'lodash': 'npm:lodash/lodash.js',

 }

In my case

 paths: {
      // paths serve as alias
      'npm:': 'node_modules/'
    },

The dependency is hammerjs. so make sure that you are importing it into your AppModule

answered Apr 13 '17 at 09:03

Aravind

40,391
16
91
110

with `@types` system, you don't need to add reference in `systemjs.cofig.js` file anymore. – micronyks Apr 13 '17 at 09:04
I faced the same issue when I had in systemjs and installed using typings but didnt work for me. same error was still there – Aravind Apr 13 '17 at 09:07
look at my comment below question. you need to add entry in `types` array – micronyks Apr 13 '17 at 09:12

score 0 · Answer 2 · answered Apr 13 '17 at 09:05

0

Add this snippet to your angular-cli.json

"scripts": [
        "../node_modules/lodash/lodash.js" //make changes accordingly
      ],

In Component, Just add declare portion just after import section and use lodash normally.

declare var _: any;

answered Apr 13 '17 at 09:05

Pramod Patil

2,704
2
14
20

Ultimacho · Answer 3 · 2017-04-13T09:40:40.210

0

I've tried several approaches for including lodash into my project. The easiest one is to import it like this:

import * as _ from 'lodash/index';

(assuming you use @types/lodash which you apparently do)

This in fact references node_modules\@types\lodash\index.d.ts file which takes care of the rest.

EDIT: may also need to add

"typeRoots": [
  "./node_modules/@types",
  "./node_modules"
]

to the compilerOptions section of your tsconfig.json

edited Apr 13 '17 at 09:40

answered Apr 13 '17 at 09:09

Ultimacho

113
1
9

@SamCaneau ok, try adding "typeRoots": [ "./node_modules/@types", "./node_modules" ] to the compilerOptions section of your tsconfig – Ultimacho Apr 13 '17 at 09:38

score 0 · Answer 4 · answered Apr 13 '17 at 09:15

0

after installing @types/lodash,

add lodash entry in types array of tsconfig.json file as shown below, you don't need to add anything else. it should work without importing anything.

{ 
  "compilerOptions": { "types" : ["node", "lodash"]  } 
}

answered Apr 13 '17 at 09:15

micronyks

54,797
15
112
146

Thx for your answer, I tried it but it makes even more errors, I removed '{' and I get that one same error "cannot find lodash module" – Sam Caneau Apr 13 '17 at 09:26

Angular2 cannont find Lodash Module

4 Answers4