13

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"
  ]
}
Community
  • 1
  • 1
BEvans
  • 641
  • 1
  • 8
  • 12

2 Answers2

21

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
David L
  • 32,885
  • 8
  • 62
  • 93
  • Don't forget to also add `lodash` to `"types": [ "node" ]` in your tsconfig.json file to be `"types": ["node","lodash"]` – mjwrazor Apr 20 '17 at 18:56
  • @mjwrazor are you certain this is necessary in Typescript 2.0+? My understanding is that this shouldn't be necessary: https://www.typescriptlang.org/docs/handbook/declaration-files/consumption.html – David L Apr 20 '17 at 20:03
  • I am about 95% sure you need to. I am on my second Typescript package and currently need to use it. For some reason my colleague doesn't seem to need to use it for all packages though. Above he has node installed and uses it. I do as default now after many headaches. – mjwrazor Apr 20 '17 at 20:11
  • @mjwrazor I can't reproduce this need in a clean angular-cli build. As long as the library and the type is installed, the Typescript compiler is humming along just fine. – David L Apr 20 '17 at 20:27
  • Have you tried installing a pure Typescript package? Also, I have not tested with angular-cli, I have only worked on pure Nodejs Typescript libraries. – mjwrazor Apr 20 '17 at 20:37
  • Based on the doc I linked, it still shouldn't be necessary in a pure Typescript application, but I'll create a test app. – David L Apr 20 '17 at 20:40
1

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.

BEvans
  • 641
  • 1
  • 8
  • 12