为什么我无法在 angular2 中导入 lodash

Question

我在 angular2 rc1 中使用 angular-cli 进行开发。

我已经通过 npm 安装了 lodash node_module 并使用以下命令在 systemjs 中对其进行了配置：

system.config.ts

/***********************************************************************************************
* User Configuration.
**********************************************************************************************/
/** Map relative paths to URLs. */
const map: any = {
};

/** User packages configuration. */
const packages: any = {
};

////////////////////////////////////////////////////////////////////////////////////////////////
/***********************************************************************************************
 * Everything underneath this line is managed by the CLI.
 **********************************************************************************************/
const barrels: string[] = [
  // Angular specific barrels.
  '@angular/core',
  '@angular/common',
  '@angular/compiler',
  '@angular/http',
  '@angular/router',
  '@angular/platform-browser',
  '@angular/platform-browser-dynamic',
  'ng2-dnd',
  'ng2-bootstrap',
  'moment',
  'lodash',

  // Thirdparty barrels.
  'rxjs',

 // App specific barrels.
 'app',
 'app/shared',     
 /** @cli-barrel */
];

const cliSystemConfigPackages: any = {};
barrels.forEach((barrelName: string) => {
    if(barrelName=='ng2-dnd'){
        cliSystemConfigPackages[barrelName] = { main: 'ng2-dnd' };
    }else if (barrelName == 'ng2-bootstrap') {
        cliSystemConfigPackages[barrelName] = { main: 'ng2-bootstrap' };
    }else if (barrelName == 'lodash') {
        cliSystemConfigPackages[barrelName] = { main: 'lodash' };
    }else if (barrelName == 'moment') {
        cliSystemConfigPackages[barrelName] = { main: 'moment' };
    }else{
        cliSystemConfigPackages[barrelName] = { main: 'index' };
    }

});

/** Type declaration for ambient System. */
declare var System: any;

// Apply the CLI SystemJS configuration.
System.config({
  map: {
    '@angular': 'vendor/@angular',
    'rxjs': 'vendor/rxjs',
    'main': 'main.js',
    'ng2-dnd': 'vendor/ng2-dnd',
    'ng2-bootstrap':'vendor/ng2-bootstrap',
    'moment':'vendor/moment',
    'lodash':'vendor/lodash'
 },
 meta: {
    lodash: { format: 'amd' }
 },  
 packages: cliSystemConfigPackages
});

// Apply the user's configuration.
System.config({ map, packages });

我只想指出其他 node_modules 工作正常，即 moment、ng2-bootstrap 等。 angular-cli-build.js

/* global require, module */

var Angular2App = require('angular-cli/lib/broccoli/angular2-app');

module.exports = function(defaults) {
   return new Angular2App(defaults, {
     vendorNpmFiles: [
       'systemjs/dist/system-polyfills.js',
       'systemjs/dist/system.src.js',
       'zone.js/dist/**/*.+(js|js.map)',
       'es6-shim/es6-shim.js',
       'reflect-metadata/**/*.+(js|js.map)',
       'rxjs/**/*.+(js|js.map)',
       '@angular/**/*.+(js|js.map)',
       'ng2-dnd/**/*.js',
       'ng2-bootstrap/**/*.js',
       'moment/*.js',
       'lodash/*.js'
     ]
   });
 };

在lodash node_module这个配置之后，我是从目录dist\vendors\lodash导入的

在我的 app.component 中，我将其导入为：

import _ from 'lodash';

但我遇到以下错误：

找不到模块“lodash”

有什么解决办法吗？ 提前致谢

Answer 1

尝试使用：

import * as _ from 'lodash';

Answer 2

我可以建议您一个解决方法，直到他们获得对 3rd 方库的更好支持。它对我有用:)

在你的 angular-cli-build.json 中，确保它保持这种方式

module.exports = function(defaults) {
  return new Angular2App(defaults, {
    vendorNpmFiles: [
      ...
      'lodash/**/*.js'
    ]
  });
};

在你的 system-config.ts 中：

/** Map relative paths to URLs. */
 const map: any = {
   'lodash': 'vendor/lodash/lodash.js'
 };

 /** User packages configuration. */
 const packages: any = {
   'lodash': {
     format: 'cjs'
   }
 };

在你的 src/index.html 添加这一行

 <script src="/vendor/lodash/lodash.js" type="text/javascript"></script>

现在在你想要使用 lodash 的组件中，这样写

declare var _:any;

@Component({
})
export class YourComponent {
  ngOnInit() {
     console.log(_.chunk(['a', 'b', 'c', 'd'], 2));
  }
}