将Lodash添加到VS2015 Angular2项目中

时间:2016-06-28 23:33:01

标签: angular npm lodash

我试图将依赖项添加到lodash到我的项目,但VS2015版本不断爆炸。在构建输出中有这个"构建:找不到模块' lodash'"。构建失败是因为typescript编译器无法解析lodash。这是我的package.json dependancies:

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

大多数围绕此错误的Google搜索都会导致我完全删除我的node_modules文件夹并重新运行npm install。我已经完成了3次,重新启动了VS2015,并重新启动了我的虚拟机,但没有任何修复。我将所有需要的依赖项从/ node_modules复制到/ Scripts / npmlibs,这样我就不必将nk下载的20k文件部署到我们的部署Web服务器。我已经验证了system.config.js文件中的路径。

我为VS / npm的错误而感到茫然,为什么我的构建在这里失败了。

谢谢!

1 个答案:

答案 0 :(得分:0)

所以看起来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世界正在快速变化,我为你的页面上的脚本src标签过去,以及使用.js文件下载zip文件... :(