angular2 failing lodash import

Question

I started simple Angular 2 app, all working. But when I add import of lodash and try to use it, I get errors and the app stops working, and can\'t figure out what is the pro

Answer 1

Fully working:

Install all thru terminal:

npm install lodash --save
tsd install lodash --save

Add paths in index.html

<script>
    System.config({
        packages: {
            app: {
                format: 'register',
                defaultExtension: 'js'
            }
        },
        paths: {
            lodash: './node_modules/lodash/lodash.js'
        }
    });
    System.import('app/init').then(null, console.error.bind(console));
</script>

Import lodash at the top of the .ts file

import * as _ from 'lodash'

Answer 2

I solved importing lodash in the following way:

import * as _ from 'lodash';

and in systemjs.config.js i defined this:

map: { 'lodash' : 'node_modules/lodash/lodash.js' }

Answer 3

Perhaps you could try this configuration at SystemJS level:

System.config({
  (...)
  map: {
    lodash: 'node_modules/lodash/lodash.js'
  },
  meta: {
    lodash: { format: 'amd' }
  }
}

In a TS file, you can then use it as described below:

import _ from 'lodash';
_.forEach([1,2,3], function(e) {
  console.log(e);
});

This issue could help you: https://github.com/systemjs/systemjs/issues/951.

Thierry