将lodash导入angular2 +打字稿应用程序


262

我很难尝试导入lodash模块。我已经使用npm + gulp设置了我的项目,并不断碰壁。我尝试过常规lodash,但也尝试过lodash-es。

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

import * as _ from 'lodash';    

结果是:

error TS2307: Cannot find module 'lodash'.

lodash-es npm软件包:(在package根文件夹中的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文件来说明问题。


1
我也遇到了这个问题。lodash库没有以模块化格式包含的typecript定义,因此import语句不起作用。现在看来,唯一的解决方法是在index.html文件中对lodash进行脚本引用,然后在打字稿文件中对lodash.d.ts进行引用。希望这个问题会尽快解决。如果有其他解决方法,我想听听。
brando

1
压缩文件会很棒。但是看来您没有使用任何模块加载器(例如jspm或webpack)?如何通过脚本标签加载Angular?更好地张贴的HTML以及。我建议您将webpack用作模块加载器,在此处查看示例-> github.com/jhades/angular2-library-example/tree/master/examples / ...,这是一个最小的入门-> github.com/jhades/ng2- webpack-minimal
Angular University


1
我最终只是将其添加到我的邮件ts文件中:/// <参考路径=“ ../ typings / tsd.d.ts”“ />
Davy

到今天为止,上述所有方法均无效。我正在使用angular.2.4.4堆栈。

Answers:


442

从Typescript 2.0开始,这是执行此操作的方法:(不建议使用tsd和打字,而推荐使用以下内容):

$ npm install --save lodash

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

然后,在您的.ts文件中:

要么:

import * as _ from "lodash";

或者(由@Naitik建议):

import _ from "lodash";

我不太肯定有什么区别。我们使用并喜欢第一种语法。但是,有些人报告说第一种语法不适用于他们,而另一些人则评论说后者的语法与延迟加载的webpack模块不兼容。YMMV。

编辑于2017年2月27日:

根据下面的@Koert,import * as _ from "lodash";是Typescript 2.2.1,lodash 4.17.4和@ types / lodash 4.14.53以来唯一的工作语法。他说,其他建议的导入语法给出错误“没有默认导出”。


7
我可以确认使用时可以使用typescript 2.0.3。确实,删除typings支持@typesnpm的软件包要干净得多。
阿德里安·莫萨

8
import * as _ from "lodash";不是为我工作,而是为我工作import _ from "lodash";
加贝·奥利里

5
一句话,我发现该import _ from "lodash"语法与延迟加载的webpack模块不兼容。不知道为什么,我没有详细调查。
Tom Makin

6
从“ lodash”导入_;在2.0中不再起作用。您必须使用“ lodash”中的import *作为_;
罗杰·法尔(Roger Far)

6
仅应在开发中使用,而不能在生产中使用,因此请使用save-dev: npm install --save-dev @types/lodash 如果您看到奇怪的问题和错误,请尝试以下操作: npm install --save-dev @types/lodash@4.14.50
leetheguy

64

2016年9月26日更新:

正如@Taytay的回答所说,我们可以使用以下方法来代替我们几个月前使用的“类型”安装:

npm install --save @types/lodash

以下是支持该答案的一些其他参考:

如果仍在使用键入安装,请参阅以下(关于其他评论)关于“''-环境”''和“''-全局”''的注释。

另外,在新的快速入门中,config.index.html中不再包含config;现在位于systemjs.config.ts中(如果使用SystemJS)。

原始答案:

这在我的mac上有效(根据快速入门安装Angular 2之后):

sudo npm install typings --global
npm install lodash --save 
typings install lodash --ambient --save

您会发现受影响的各种文件,例如

  • /typings/main.d.ts
  • /typings.json
  • /package.json

Angular 2 Quickstart使用System.js,因此我在index.html中的配置中添加了“ map”,如下所示:

System.config({
    packages: {
      app: {
        format: 'register',
        defaultExtension: 'js'
      }
    },
    map: {
      lodash: 'node_modules/lodash/lodash.js'
    }
  });

然后,在我的.ts代码中,我可以执行以下操作:

import _ from 'lodash';

console.log('lodash version:', _.VERSION);

从2016年中开始的修改:

正如@tibbus提到的,在某些情况下,您需要:

import * as _ from 'lodash';

如果从angular2-seed开始,并且不想每次都导入,则可以跳过地图和导入步骤,而只需取消注释tools / config / project.config.ts中的虚线。

为了使我的测试与lodash一起使用,我还必须在karma.conf.js中的文件数组中添加一行:

'node_modules/lodash/lodash.js',

我看到这解决了我的TypeScript问题,但是在浏览器中加载页面后,我仍然看到它找不到模块lodash的错误。似乎它向'/ lodash'而不是node_modules发出了xhr请求失败。
Zack

1
@zack你错过 map: { lodash: 'node_modules/lodash/lodash.js' }System.config吗?
xwb1989

5
对我来说,它仅适用于从“ lodash”作为_导入*;
tibbus

1
...为什么我们需要写import * as _ from 'lodash'而不是写import _ from 'lodash'
smartmouse

2
@smartmouse --ambient是的前身--global。后者在1.x中使用并向前发展。但是,我不认为最新的lodash 4.x会像那样被编译为全局模块。
demisx

25

第一件事

npm install --save lodash

npm install -D @types/lodash

加载完整的lodash库

//some_module_file.ts
// Load the full library...
import * as _ from 'lodash' 
// work with whatever lodash functions we want
_.debounce(...) // this is typesafe (as expected)

仅加载我们要使用的功能

import * as debounce from 'lodash/debounce'
//work with the debounce function directly
debounce(...)   // this too is typesafe (as expected)


UPDATE - March 2017

我目前正在与一起工作ES6 modules,最近我可以这样工作lodash

// the-module.js (IT SHOULD WORK WITH TYPESCRIPT - .ts AS WELL) 
// Load the full library...
import _ from 'lodash' 
// work with whatever lodash functions we want
_.debounce(...) // this is typesafe (as expected)
...

import特定lodash functionality

import debounce from 'lodash/debounce'
//work with the debounce function directly
debounce(...)   // this too is typesafe (as expected)
...

注意 - * as不需要区别syntax


参考文献:

在此处输入图片说明

祝好运。


“在定位ECMAScript 2015模块时,不能使用导入分配”
Toolkit

@工具包。感谢您指出。我已经更新了答案。请检查此解决方案是否有效并正确标记。
阿卡什

2
import debounce from 'lodash/debounce'TS1192: Module node_modules/@types/lodash/debounce has no default export何时产生"allowSyntheticDefaultImports": false
kross

1
我支持我先前的评论。类型文件中当前没有默认导出,因此这不适用于allowSyntheticDefaultImports false。
kross

1
@kross还请注意,"allowSyntheticDefaultImports": true可能需要在tsconfig.json文件中添加编译器选项,以避免出现任何错误。
阿卡什(Akash)

24

步骤1:修改package.json文件,在依赖项中包含lodash。

  "dependencies": {
"@angular/common":  "2.0.0-rc.1",
"@angular/compiler":  "2.0.0-rc.1",
"@angular/core":  "2.0.0-rc.1",
"@angular/http":  "2.0.0-rc.1",
"@angular/platform-browser":  "2.0.0-rc.1",
"@angular/platform-browser-dynamic":  "2.0.0-rc.1",
"@angular/router":  "2.0.0-rc.1",
"@angular/router-deprecated":  "2.0.0-rc.1",
"@angular/upgrade":  "2.0.0-rc.1",
"systemjs": "0.19.27",
"es6-shim": "^0.35.0",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.6",
"zone.js": "^0.6.12",
"lodash":"^4.12.0",
"angular2-in-memory-web-api": "0.0.7",
"bootstrap": "^3.3.6"  }

步骤2:我在我的angular2应用程序中使用SystemJs模块加载器。因此,我将修改systemjs.config.js文件以映射lodash。

(function(global) {

// map tells the System loader where to look for things
var map = {
    'app':                        'app', // 'dist',
    'rxjs':                       'node_modules/rxjs',
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
    '@angular':                   'node_modules/@angular',
    'lodash':                    'node_modules/lodash'
};

// packages tells the System loader how to load when no filename and/or no extension
var packages = {
    'app':                        { main: 'main.js',  defaultExtension: 'js' },
    'rxjs':                       { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { defaultExtension: 'js' },
    'lodash':                    {main:'index.js', defaultExtension:'js'}
};

var packageNames = [
    '@angular/common',
    '@angular/compiler',
    '@angular/core',
    '@angular/http',
    '@angular/platform-browser',
    '@angular/platform-browser-dynamic',
    '@angular/router',
    '@angular/router-deprecated',
    '@angular/testing',
    '@angular/upgrade',
];

// add package entries for angular packages in the form '@angular/common': { main: 'index.js', defaultExtension: 'js' }
packageNames.forEach(function(pkgName) {
    packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
});

var config = {
    map: map,
    packages: packages
}

// filterSystemConfig - index.html's chance to modify config before we register it.
if (global.filterSystemConfig) { global.filterSystemConfig(config); }

System.config(config);})(this);

步骤3:现在执行npm安装

第4步:在文件中使用lodash。

import * as _ from 'lodash';
let firstIndexOfElement=_.findIndex(array,criteria);

您的解决方案如何处理TypeScript类型?npm lodash软件包似乎不包含.d.ts文件。
Vitali Kniazeu '16

13

从Typescript 2.0开始,@ types npm模块用于导入类型。

# Implementation package (required to run)
$ npm install --save lodash

# Typescript Description
$ npm install --save @types/lodash 

现在既然已经回答了这个问题,我将介绍如何有效导入lodash

导入整个库的故障安全方法(在main.ts中)

import 'lodash';

这是这里的新内容:

使用所需功能实现轻巧的功能

import chain from "lodash/chain";
import value from "lodash/value";
import map from "lodash/map";
import mixin from "lodash/mixin";
import _ from "lodash/wrapperLodash";

来源:https : //medium.com/making-internets/why-using-chain-is-a-mistake-9bc1f80d51ba#.kg6azugbd

PS:以上文章是有关缩短构建时间并减小应用程序大小的有趣文章


1
对于TSC来说,这很棒,但是它给捆绑器带来了其他问题。您是否有机会通过汇总解决此问题?奥里利亚-CLI也使问题与它:(。 汇总错误: '默认'不node_modules \ lodash \ kebabCase.js出口 Aurelia路上CLI错误没有这样的文件或目录,打开“/实验\ AU-凸出\ node_modules \ lodash: \ lodash \ kebabCase.js'
斯蒂芬Lautier

7
似乎@ types / lodash还不支持较轻的语法。 error TS1192: Module '"node_modules/@types/lodash/chain/index"' has no default export. 对于尝试缩短import chain from "lodash/chain"进口量的其他模块,依此类推
-jamsinclair

10

我使用以下命令成功将lodash导入了我的项目:

npm install lodash --save
typings install lodash --save

然后我以以下方式导入它:

import * as _ from 'lodash';

在systemjs.config.js中,我定义为:

map: { 'lodash' : 'node_modules/lodash/lodash.js' }


8

我遇到了完全相同的问题,但是在Angular2应用中,本文只是解决了这个问题:https ://medium.com/@s_eschweiler/using-external-libraries-with-angular-2-87e06db8e5d1#.p6gra5eli

文章摘要:

  1. 安装库 npm install lodash --save
  2. 为Lodash添加TypeScript定义 tsd install underscore
  3. 包括脚本 <script src="node_modules/lodash/index.js"></script>
  4. 配置SystemJS System.config({ paths: { lodash: './node_modules/lodash/index.js'
  5. 导入模块 import * as _ from ‘lodash’;

我希望它对您的情况也有用


6
tsd现在已弃用。您应该使用
打字

7

另一个优雅的解决方案是仅获取所需内容,而不导入所有lodash

import {forEach,merge} from "lodash";

然后在你的代码中使用它

forEach({'a':2,'b':3}, (v,k) => {
   console.log(k);
})

5
这真的有效吗?我已经尝试过了,它似乎并没有改变捆绑包的大小。
科迪

1
也许不是那时,但现在是。最好的是摇晃的树木
Pian0_M4n

@ Pian0_M4n也许我做错了,但是尝试使用角度cli 1.4.4摇树不起作用
alexKhymenko

@alexKhymenko您可以发布错误吗?它与lodash连接了吗?
Pian0_M4n

@ Pian0_M4n没有错误,只有树没有摇晃。它加载整个库,而不是forEach和merge方法。
alexKhymenko

4

如果还有其他人遇到此问题,并且由于“重复标识符”问题而导致以上解决方案均无效,请运行以下命令:

npm install typings --global

使用较早版本的打字时,事情变得一团糟,您会遇到一堆“重复标识符”问题。而且--ambient,据我所知,您无需再使用了。

因此,一旦键入是最新的,它就应该起作用了(使用Angular 2快速入门)。

跑:

npm install lodash --save 
typings install lodash --save

首先,将其添加到systemjs.config.js中:

'lodash':                     'node_modules/lodash/lodash.js'

现在,您可以在任何文件中使用它: import * as _ from 'lodash';

删除打字文件夹,npm install如果仍有问题,请运行。


4

请注意,这npm install --save将增强您的应用程序在生产代码中所需的任何依赖关系。
至于“类型”,只有TypeScript才需要,而TypeScript最终会在JavaScript中转译。因此,您可能不想在生产代码中包含它们。我建议将其放入您项目的devDependencies

npm install --save-dev @types/lodash

要么

npm install -D @types/lodash

(例如,参见Akash帖子)。顺便说一下,这就是在ng2 tuto中完成的方式。

另外,这是package.json的样子:

{
    "name": "my-project-name",
    "version": "my-project-version",
    "scripts": {whatever scripts you need: start, lite, ...},
    // here comes the interesting part
    "dependencies": {
       "lodash": "^4.17.2"
    }
    "devDependencies": {
        "@types/lodash": "^4.14.40"
    }
}

只是一个小费

有趣的npm是,您可以简单地执行一个,npm install --save或者--save-dev如果不确定要查找的依赖项的最新版本,它将自动为您设置以供将来package.json使用。


3

我已经为 lodash-es,所以现在您实际上可以执行以下操作

安装

npm install lodash-es -S
npm install @types/lodash-es -D

用法

import kebabCase from "lodash-es/kebabCase";
const wings = kebabCase("chickenWings");

如果您使用汇总,我建议您使用它而不是,lodash因为它会被适当地砍树。


3

lodash进行部分导入应使用以下符号在angular 4.1.x中工作:

let assign = require('lodash/assign');

或使用“ lodash-es”并导入模块:

import { assign } from 'lodash-es';

import { assign } from 'lodash-es';似乎仍会导入整个库(根据包大小判断)
ihorbond19年

2

通过安装npm

$ npm install lodash --save

现在,import在文件中:

$ import * as _ from 'lodash';

ENV:

Angular CLI:1.6.6
节点:6.11.2
OS:darwin x64
Angular:5.2.2
打字稿:2.4.2
Webpack:3.10.0


1
  1. 安装lodash

sudo npm install typings --global npm install lodash --save typings install lodash --ambient --save

  1. 在index.html中,为lodash添加地图:

System.config({ packages: { app: { format: 'register', defaultExtension: 'js' } }, map: { lodash: 'node_modules/lodash/index.js' } });

  1. 在.ts代码中导入lodash模块

import _ from 'lodash';


$ typings install lodash --ambient --save typings ERR! message https://api.typings.org/entries/npm/lodash/versions/latest responded with 407, expected it to equal 200
引发

1

我正在将ng2与webpack一起使用,而不是系统JS。我需要采取的步骤是:

npm install underscore --save
typings install dt~underscore --global --save

然后在文件中我希望将下划线导入到:

import * as _ from 'underscore';

1

最终不赞成通过typingstsd命令管理类型,而推荐使用npm via npm install @types/lodash

但是,我很长时间在import语句中为“ Cannot find module lodash”苦苦挣扎:

import * as _ from 'lodash';

最终,我意识到Typescript只能从版本2开始的node_modules / @ types中加载类型,而我的VsCode Language服务仍在使用1.8,因此编辑器正在报告错误。

如果您使用的是VSCode,则需要包含

"typescript.tsdk":  "node_modules/typescript/lib"

在您的VSCode settings.json文件中(用于工作空间设置),并确保您通过以下方式安装了打字稿版本> = 2.0.0 npm install typescript@2.0.2 --save-dev

之后,我的编辑就不会对导入语句有所抱怨。


1

如果之后不工作

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

您尝试此并导入lodash

typings install lodash --save


0

通过终端安装所有终端:

npm install lodash --save
tsd install lodash --save

在index.html中添加路径

<script>
    System.config({
        packages: {
            app: {
                format: 'register',
                defaultExtension: 'js'
            }
        },
        paths: {
            lodash: './node_modules/lodash/lodash.js'
        }
    });
    System.import('app/init').then(null, console.error.bind(console));
</script>

在.ts文件顶部导入lodash

import * as _ from 'lodash'

7
tsd现在已弃用。您应该使用
打字

1
现在不推荐使用类型。您应该使用@types
Luca Trazzi 2016年

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

0

也许这太奇怪了,但是以上内容都没有帮助我,首先,因为我已经正确安装了lodash(也通过上述建议重新安装了)。

长话短说,问题与lodash的使用_.has方法有关

我通过简单地使用JS in运算符修复了它。


-1

尝试>> tsd install lodash --save


8
tsd现在已弃用。您应该使用
打字

7
现在不推荐使用类型。您应该使用@types .. :)
harishr '16

12
我正在等待其他弃用评论;)
Idrees Khan

不推荐使用。嗯..别怪我。您要求提供一个;-)
sarora

-1

您也可以按照旧的要求继续进行导入,即:

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

这是唯一对我们有用的东西。当然,请确保在导入后进行任何require()调用。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.