将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 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);