将lodash导入angular2 typescript应用程序

我有一个很难的时间试图获得lodash模块导入。我已经设置了我的项目使用npm gulp，并保持击中同一堵墙。我试过了正常的lodash，但也lodash-es。

lodash npm包:(在包根文件夹中有一个index.js文件)

import * as _ from 'lodash';

结果是：

error TS2307: Cannot find module 'lodash'.

lodash-es npm包:(在lodash.js中有一个defaut导出包的根文件夹)

import * as _ from 'lodash-es/lodash';

结果是：

error TS2307: Cannot find module 'lodash-es'.

gulp任务和webstorm报告相同的问题。

有趣的事实，这没有返回错误：

import 'lodash-es/lodash';

…但当然没有“_”…

我的tsconfig.json文件：

{
  "compilerOptions": {
    "target": "es5","module": "system","moduleResolution": "node","sourceMap": true,"emitDecoratorMetadata": true,"experimentalDecorators": true,"removeComments": false,"noImplicitAny": false
  },"exclude": [
    "node_modules"
  ]
}

我的gulpfile.js：

var gulp = require('gulp'),ts = require('gulp-typescript'),uglify = require('gulp-uglify'),sourcemaps = require('gulp-sourcemaps'),tsPath = 'app/**/*.ts';

gulp.task('ts',function () {
    var tscConfig = require('./tsconfig.json');

    gulp.src([tsPath])
        .pipe(sourcemaps.init())
        .pipe(ts(tscConfig.compilerOptions))
        .pipe(sourcemaps.write('./../js'));
});

gulp.task('watch',function() {
    gulp.watch([tsPath],['ts']);
});

gulp.task('default',['ts','watch']);

如果我理解正确，我的tsconfig中的moduleResolution：’node’应该将import语句指向node_modules文件夹，其中安装了lodash和lodash-es。我也试过很多不同的方式来导入：绝对路径，相对路径，但似乎没有什么工作。有任何想法吗？

如果有必要我可以提供一个小的zip文件来说明问题。

这里是如何做到这一点Typescript 2.0：
(tsd和类型已被弃用，赞成以下)：

$ npm install --save lodash

# This is the new bit here: 
$ npm install --save @types/lodash

然后，在.ts文件中：

或者：

import * as _ from "lodash";

或者(由@Naitik建议)：

import _ from "lodash";

我不是正面的区别是什么。我们使用并喜欢第一个语法。然而，有些报告说，第一个语法不适用于他们，有人评论说，后一种语法与延迟加载webpack模块不兼容。 YMMV。

将lodash导入angular2 typescript应用程序

猜你在找的Angularjs相关文章