Question

导入lodash模块我很难。

我去了那个解决方案here但是它仍然没有工作我仍然有错误“cannon find module”lodash“”。

我尝试删除依赖项并使用npm install重新安装它们，但它不会改变任何内容。

import "lodash"有效但import * as _ from "lodash"没有... 我检查了并且已经安装了lodash

这是我的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"
  }
}

有没有解决这个问题的方案？

[编辑]

这是我的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"
  ]
}

Answer 1

通过检查node_modules中的lodash文件夹确保安装。然后使用命令

安装typings

typings install lodash

Systemjs.config.js：添加以下项目

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

 }

就我而言

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

依赖是hammerjs。所以请确保将其导入AppModule

Answer 2

将此代码段添加到angular-cli.json

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

在Component中，只需在导入部分之后添加声明部分并正常使用lodash。

declare var _: any;

Answer 3

我尝试了几种方法将lodash包含到我的项目中。最简单的方法是像这样导入它：

import * as _ from 'lodash/index';

（假设你使用@types/lodash，你显然这样做）

这实际上引用了node_modules\@types\lodash\index.d.ts文件来处理其余的事情。

编辑：可能还需要添加

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

到tsconfig.json的compilerOptions部分

Answer 4

安装@types/lodash后，

在lodash types文件的tsconfig.json数组中添加{ "compilerOptions": { "types" : ["node", "lodash"] } }条目，如下所示，您不需要添加任何其他内容。它应该无需导入任何东西。

#div1:hover, #div2:hover {color: green;}

Angular2 cannont找到Lodash模块

4 个答案: