将lodash导入angular2 + typescript应用程序

Question

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

Answer 1

步骤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 thingsvar 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 extensionvar 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);