TS2307 Build:Cannot find module 'lodash'

Question

Update

I apologise, I did not explain my issue very clearly. The errors I was getting was not while compiling the Angular application via Gulp, but in the Visual Studio 'Errors List'. I have since been able to resolve the issue (workaround at least) but I would like to thank everyone who responded. My resolution is below.

---

I have built an Angular4 / TypeScript application in a PoC Asp.Net Core Web Application. The Angular4 application was working perfectly in my PoC app so then I copied all of the relevant files to the application I am developing (also an Asp.Net Core Web App).

I then ran 'npm install' to make sure all of the dependencies were installed and used Gulp to create the .js files in my wwwroot/js/ folder. Gulp completed without error but now Visual Studio is reporting the error below and is preventing me from building the project.

TS2307 Build:Cannot find module 'lodash'.

What is even more confusing is after completing the steps above, the original PoC app is getting the same error despite no changes having being made to the project which makes me think this is more of an environmental issue.

I have read through Similar Issue where they say to install @types/lodash but that causes duplication errors (uninstalling typings fixes the duplication errors but causes other errors).

The .ts code throwing the error is:

import * as _ from "lodash";

Changing to:

import _ from "lodash";

does not work.

Thank you in advance for any help as I am currently tearing my hair out trying to work out why this is not working anymore.

My config files are as follows:

package.json

{
  "version": "1.0.0",
  "name": "aspnet",
  "private": true,
  "scripts": {
    "postinstall": "typings install",
    "typings": "typings"
  },
  "dependencies": {
    "@angular/common": "~4.0.0",
    "@angular/compiler": "~4.0.0",
    "@angular/core": "~4.0.0",
    "@angular/forms": "~4.0.0",
    "@angular/http": "~4.0.0",
    "@angular/platform-browser": "~4.0.0",
    "@angular/platform-browser-dynamic": "~4.0.0",
    "@angular/router": "~4.0.0",
    "angular-in-memory-web-api": "~0.3.0",
    "angular2-datatable": "^0.6.0",
    "bootstrap": "^3.3.7",
    "core-js": "^2.4.1",
    "lodash": "^4.17.4",
    "moment": "^2.14.1",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.1",
    "systemjs": "0.19.40",
    "zone.js": "^0.8.4"
  },
  "devDependencies": {
    "@types/node": "7.0.7",
    "gulp": "^3.9.1",
    "gulp-clean": "^0.3.2",
    "gulp-concat": "^2.6.1",
    "gulp-less": "^3.1.0",
    "gulp-sourcemaps": "^1.6.0",
    "gulp-tsc": "^1.3.1",
    "gulp-typescript": "^3.1.6",
    "gulp-uglify": "^2.0.0",
    "path": "^0.12.7",
    "typescript": "^2.1.0",
    "typings": "^2.1.0"
  }
}

typings.json

    {
  "globalDependencies": {
    "core-js": "registry:dt/core-js#0.0.0+20160725163759",
    "jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
    "node": "registry:dt/node#6.0.0+20160909174046"
  }
}

tsconfig.json

    {
  "compilerOptions": {
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "module": "commonjs",
    "noEmitOnError": true,
    "noImplicitAny": false,
    "outDir": "../wwwroot/app/",
    "removeComments": false,
    "sourceMap": true,
    "target": "es5",
    "moduleResolution": "node",
    "typeRoots": [
      "./node_modules/@types",
      "./node_modules"
    ],
    "types": [
      "node"
    ]
  },
  "exclude": [
    "node_modules"
  ]
}

Answer 1

You should install the @types/lodash package via:

npm install --save @types/lodash

This will tell the Typescript compiler what lodash is and what modules and components are exposed by the library.

In addition, typings is no longer the recommended approach. You should uninstall and remove typings and you should switch to @types packages only by updating your tsconfig to:

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

Finally, once you have removed typings, you will need to add @types packages for core-js and jasmine to enable those packages:

npm install --save @types/core-js
npm install --save @types/jasmine

Answer 2

Once again, thank you to everyone who responded and I apologise for not being clearer with the actual issue initially.

My TypeScript files were compiling correctly, but Visual Studio was continuing to report build errors in the 'Error List' window.

After trying a number of steps (those listed above any many more) the thing that fixed the issue for me was found here: http://rostacik.net/2015/08/14/how-to-disable-building-of-typescript-files-in-visual-studio-2015/

In short, open your project ".xproj" file (might be ".csproj") using a text editor. Locate the <PropertyGroup> </PropertyGroup> tags and add the line <TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>. Save the file and then allow Visual Studio to update the files as needed. Now re-build your application.