Lodash _.findIndex 在 tsd install lodash --save in angular2 中不起作用

Question

我用两种方法实现了 lodash：

方法 1：我在 bower_component 中安装并declare var _:any; 在组件中。 它的工作正常

在单击事件中，我正在调用此函数：

checkLodash() {
  _.forEach({ a: 1, b: 2 }, function (value, key) {
    console.log(key);
  });

  let a = _.findIndex(this.users, 'active');
  console.log(a);
}

一切正常。 但我在生产中遇到了这个问题

EXCEPTION: ReferenceError: _ is not defined

我从这里得到了一些解决方案 [https://stackoverflow.com/questions/36171727/lodash-in-angular2-declare-var-any-not-working][link]

方法 2：在我的应用程序中没有 systemjs，因为我使用的是 [seed-app][1]，所以我使用了
tsd install lodash --save and

import * as _ from 'lodash';

我在点击事件中调用这个函数

constructor() {
  this.show_data = 'hello';
  this.users = [
    { user: 'barney', active: false },
    { user: 'fred', active: false },
    { user: 'pebbles', active: true },
  ];
  _.forEach({ a: 1, b: 2 }, function (value, key) {
    console.log(key);
  });
}

checkLodash() {
  _.forEach({ a: 1, b: 2 }, function (value, key) {
    console.log(key);
  });

  let a = _.findIndex(this.users, 'active');
  console.log(a);
}

现在我的输出是：ab（在 console.log 中）如果我点击按钮调用checkLodash函数，我会收到这个错误，

EXCEPTION: Error during evaluation of "click"
ORIGINAL EXCEPTION: TypeError: _.findIndex is not a function
browser_adapter.js:76 TypeError: _.findIndex is not a function
    at LodashWithoutDeclare.checkLodash (lodash-without-declare.ts:31)
    at AbstractChangeDetector.ChangeDetector_LodashWithoutDeclare_0.handleEventInternal (viewFactory_LodashWithoutDeclare:75)
    at AbstractChangeDetector.handleEvent (abstract_change_detector.js:57)
    at AppView.triggerEventHandlers (view.js:221)
    at eval (viewFactory_LodashWithoutDeclare:130)
    at dom_renderer.js:282
    at dom_events.js:28
    at ZoneDelegate.invoke (angular2-polyfills.js:332)
    at Object.NgZoneImpl.inner.inner.fork.onInvoke (ng_zone_impl.js:44)
    at ZoneDelegate.invoke (angular2-polyfills.js:331)

如何解决这个问题？

Answer 1

检查你的 lodash 发行版，我猜它不是完整的构建，只是核心。

Answer 2

tsd 已弃用。 用这种方式

npm install lodash --save
typings install lodash --ambient --save

在此之前，请确保您全局安装typings

npm 安装类型 -g

然后在你的 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));
  }
}

它对我有用:)