将 Lodash 添加到 VS2015 Angular2 项目答案

【问题标题】：Add Lodash to VS2015 Angular2 Project将 Lodash 添加到 VS2015 Angular2 项目
【发布时间】：2016-06-28 23:33:00
【问题描述】：

我正在尝试将 lodash 的依赖项添加到我的项目中，但 VS2015 构建一直在爆炸。在构建输出“构建：找不到模块'lodash'”中使用它。构建失败，因为 typescript 编译器无法解析 lodash。这是我的 package.json 依赖项：

"dependencies": {
    "@angular/common": "2.0.0-rc.3",
    "@angular/compiler": "2.0.0-rc.3",
    "@angular/core": "2.0.0-rc.3",
    "@angular/forms": "0.1.1",
    "@angular/http": "2.0.0-rc.3",
    "@angular/platform-browser": "2.0.0-rc.3",
    "@angular/platform-browser-dynamic": "2.0.0-rc.3",
    "@angular/router": "3.0.0-alpha.7",
    "@angular/router-deprecated": "2.0.0-rc.2",
    "@angular/upgrade": "2.0.0-rc.3",

    "systemjs": "0.19.27",
    "core-js": "^2.4.0",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.6",
    "zone.js": "^0.6.12",

    "lodash": "4.13.1",
    "angular2-in-memory-web-api": "0.0.12",
    "bootstrap": "^3.3.6"
  },
  "devDependencies": {
    "concurrently": "^2.0.0",
    "lite-server": "^2.2.0",
    "typescript": "^1.8.10",
    "typings":"^1.0.4"
  }

这是我的 system.config.js：

/**
 * System configuration for Angular 2 samples
 * Adjust as necessary for your application needs.
 */
(function (global) {
    // map tells the System loader where to look for things
    var map = {
        'app': 'app', // 'dist',
        '@angular': 'Scripts/npmlibs/@angular',
        'angular2-in-memory-web-api': 'Scripts/npmlibs/angular2-in-memory-web-api',
        'rxjs': 'Scripts/npmlibs/rxjs',
        'lodash': 'Scripts/npmlibs/lodash/lodash.js'
    };
    // 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': { defaultExtension: 'js' }
    };
    var ngPackageNames = [
      'common',
      'compiler',
      'core',
      'http',
      'platform-browser',
      'platform-browser-dynamic',
      'router',
      'router-deprecated',
      'upgrade',
      'forms'
    ];

    // Individual files (~300 requests):
    function packIndex(pkgName) {
        packages['@angular/' + pkgName] = { main: 'index.js', defaultExtension: 'js' };
    }
    // Bundled (~40 requests):
    function packUmd(pkgName) {
        packages['@angular/' + pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
    }
    // Most environments should use UMD; some (Karma) need the individual index files
    var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
    // Add package entries for angular packages
    ngPackageNames.forEach(setPackageConfig);

    var config = {
        map: map,
        packages: packages
    }
    System.config(config);
})(this);

围绕这个错误的大部分谷歌搜索导致我完全删除了我的 node_modules 文件夹并重新运行 npm install。我已经这样做了 3 次，重新启动了 VS2015，并重新启动了我的虚拟机，但没有解决这个问题。我将所有需要的依赖项从 /node_modules 复制到 /Scripts/npmlibs，这样我就不必将 npm 下载的 20k 文件部署到我们的部署 Web 服务器。我已经验证了 system.config.js 文件中的路径。

我不知道 VS/npm 出了什么问题，为什么我的构建在这里失败了。

谢谢！

【问题讨论】：

标签： angular npm lodash

【解决方案1】：

所以看起来 lodash 没有附带 .d.ts 文件，或者我可能通过 npm 不正确地安装它......无论哪种方式解决这个问题并让我的打字稿编译我都必须将此 nuget 包添加到我的网络项目

lodash type definitions

其中添加了 /Scripts/typings/lodash/lodash-3.10.d.ts 和 lodash.d.ts。我不得不删除一个，因为 TSC 抱怨重复定义，所以我删除了 lodash-3.10.d.ts。重新启动VS并编译。

到目前为止，我很喜欢 angular2，但是 JS/Typescript 世界正在快速变化，我为您页面上的 script src 标签以及下载带有 .js 文件的 zip 文件的美好时光而松了一口气...... :(

【讨论】：