Angular2不能找到Lodash模塊

Question

我很難與導入lodash模塊。

我去那個解決方案here但它仍然無法正常工作我仍然有錯誤「cannon find module」lodash「」。

我試圖刪除依賴關係，並使用npm install重新安裝它，它不會改變任何東西。

​​作品，但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 install lodash 

Systemjs.config.js安裝分型：添加以下項目

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

} 

在我的情況

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

的依賴是hammerjs。所以請確保您導入到你的AppModule

Answer 2

這個片段添加到您的角cli.json

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

在組件，纔剛剛導入後部分添加聲明部分和正常使用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

Answer 4

的compilerOptions部分安裝@types/lodash後，

在types陣列tsconfig.json文件添加lodash進入如圖所示下面，你不需要添加任何東西。它應該不需要導入任何東西。

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