将lodash引入Angular2+TypeScript应用程序

301

我试图导入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中有一个默认导出)

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文件来说明问题。


2
我也遇到了这个问题。lodash库没有以模块化格式包含TypeScript定义,因此导入语句无法正常工作。现在唯一的解决方法似乎是在index.html文件中创建一个脚本引用lodash,然后在你的TypeScript文件中引用lodash.d.ts。希望这个问题能够很快得到解决。如果有其他解决方法,我很想听听。 - brando
1
压缩文件会很好。但是看起来你没有使用任何模块加载器(如jspm或webpack)?你是通过脚本标签加载Angular的吗?最好也发布一下HTML代码。我建议你使用webpack作为模块加载器,这里有一个例子-> https://github.com/jhades/angular2-library-example/tree/master/examples/webpack 这是一个最小化的入门示例-> https://github.com/jhades/ng2-webpack-minimal - Angular University
请查看此链接:https://github.com/DefinitelyTyped/DefinitelyTyped/issues/4889 - brando
1
我最终只是将这个添加到我的邮件ts文件中:/// <reference path="../typings/tsd.d.ts" /> - Davy
截至今天,以上内容均不起作用。我正在使用angular.2.4.4堆栈。 - user1969453
这个回答解决了你的问题吗?在Angular中正确导入和使用lodash的方法 - Anand Raja
23个回答

0

我正在使用preboot/angular-webpack的Angular 4.0.0版本,并且必须采用稍微不同的方法。

@Taytay提供的解决方案对我大部分都有效:

npm install --save lodash
npm install --save @types/lodash

并使用以下方式将函数导入到给定的.component.ts文件中:

import * as _ from "lodash";

这能正常工作是因为没有“默认”导出的类。我的区别在于,我需要找到提供加载第三方库的方式:位于vendor.ts的文件:

src/vendor.ts

我的 vendor.ts 文件现在看起来像这样:

import '@angular/platform-browser';
import '@angular/platform-browser-dynamic';
import '@angular/core';
import '@angular/common';
import '@angular/http';
import '@angular/router';

import 'rxjs';
import 'lodash';

// Other vendors for example jQuery, Lodash or Bootstrap
// You can import js, ts, css, sass, ...

1
你应该真正减少导入整个RxJS和lodash的所有内容... - MTJ

-1

尝试 >> tsd install lodash --save


8
tsd现已不推荐使用。你应该使用typings。 - hhsadiq
7
typings现在已经被弃用,你应该使用@types来代替。 :) - harishr
13
我在等待另一个废弃评论的出现 ;) - Idrees Khan
弃用已被弃用。嗯...别怪我。你要求的 :-) - sarora

-1

你也可以通过传统的 require 方式进行导入,例如:

const _get: any = require('lodash.get');

这是我们唯一成功的方法。当然,在导入之后,请确保任何 require() 调用都正确。


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接