TS2307 构建：找不到模块“lodash”答案

【问题标题】：TS2307 Build:Cannot find module 'lodash'TS2307 构建：找不到模块“lodash”
【发布时间】：2017-09-17 11:51:54
【问题描述】：

更新

抱歉，我没有很清楚地解释我的问题。我得到的错误不是在通过 Gulp 编译 Angular 应用程序时，而是在 Visual Studio 的“错误列表”中。我已经能够解决这个问题（至少是解决方法），但我要感谢所有回复的人。我的分辨率如下。

我在 PoC Asp.Net Core Web 应用程序中构建了一个 Angular4 / TypeScript 应用程序。 Angular4 应用程序在我的 PoC 应用程序中运行良好，因此我将所有相关文件复制到我正在开发的应用程序（也是一个 Asp.Net Core Web 应用程序）中。

然后我运行“npm install”以确保所有依赖项都已安装并使用 Gulp 在我的 wwwroot/js/ 文件夹中创建 .js 文件。 Gulp 没有错误地完成，但现在 Visual Studio 报告了以下错误并阻止我构建项目。

TS2307 Build:Cannot find module 'lodash'.

更令人困惑的是，在完成上述步骤后，原始 PoC 应用程序出现了同样的错误，尽管项目没有进行任何更改，这让我认为这更像是一个环境问题。

我已经阅读了Similar Issue，他们说要安装@types/lodash，但这会导致重复错误（卸载打字可以修复重复错误，但会导致其他错误）。

抛出错误的.ts代码是：

import * as _ from "lodash";

改为：

import _ from "lodash";

不工作。

提前感谢您提供的任何帮助，因为我目前正忙着想弄清楚为什么这不再起作用了。

我的配置文件如下：

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"
  ]
}

【问题讨论】：

标签： angular typescript visual-studio-2015 npm-install

【解决方案1】：

您应该通过以下方式安装@types/lodash package：

npm install --save @types/lodash

这将告诉 Typescript 编译器 lodash 是什么以及库公开了哪些模块和组件。

此外，typings 不再是推荐的方法。您应该卸载并删除 typings，并且您应该切换到 @types 软件包，只需将您的 tsconfig 更新为：

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

最后，一旦您删除了类型，您将需要为 core-js 和 jasmine 添加 @types 包以启用这些包：

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

【讨论】：

别忘了在 tsconfig.json 文件中将 lodash 添加到 "types": [ "node" ] 为 "types": ["node","lodash"]
@mjwrazor 你确定这在 Typescript 2.0+ 中是必要的吗？我的理解是这不应该是必要的：typescriptlang.org/docs/handbook/declaration-files/…
我大约 95% 确定您需要这样做。我正在使用我的第二个 Typescript 包，目前需要使用它。出于某种原因，我的同事似乎不需要将它用于所有软件包。上面他安装了节点并使用它。经过许多头痛后，我现在默认使用。
@mjwrazor 我无法在干净的 angular-cli 构建中重现此需求。只要安装了库和类型，Typescript 编译器就可以正常运行。
你试过安装纯Typescript包吗？另外，我没有用 angular-cli 测试过，我只在纯 Nodejs Typescript 库上工作过。

【解决方案2】：

再次感谢所有回复的人，对于最初没有更清楚实际问题，我深表歉意。

我的 TypeScript 文件编译正确，但 Visual Studio 继续在“错误列表”窗口中报告构建错误。

在尝试了一些步骤（上面列出的更多）之后，在这里找到了为我解决问题的方法：http://rostacik.net/2015/08/14/how-to-disable-building-of-typescript-files-in-visual-studio-2015/

简而言之，使用文本编辑器打开您的项目“.xproj”文件（可能是“.csproj”）。找到<PropertyGroup> </PropertyGroup> 标签并添加<TypeScriptCompileBlocked>true</TypeScriptCompileBlocked> 行。保存文件，然后允许 Visual Studio 根据需要更新文件。现在重新构建您的应用程序。

【讨论】：