Angular2 - Angular-CLI installing lodash - Cannot find module

Question

Mac OSX El capitan | angular-cli: 0.1.0 | node: 5.4.0 | os: darwin x64

I try to install a 3rd party npm module according to the angular-cli wiki: https://github.com/

Answer 1

FWIW, as of today (1.0.0-beta.26), adding the scripts entry is not necessary anymore.

Simply add the proper entries to package.json using:

npm i --save lodash
npm i --save-dev @types/lodash

Then, in your TypeScript code, use:

import * as _ from 'lodash';

The code will run just fine.

In my case, actually adding the scripts entry was causing issues.

Answer 2

In order to support 3rd party libraries in Angular CLI and System.js, you have to specify them manually on system.config.ts and angular-cli-build.js. I've answered it here with example for lodash and also other dependencies.

Answer 3

[updated answer] After the new version of angular-cli (1.0.0-beta.15):

just add

npm install lodash --save
npm install @types/lodash --save-dev

then add the library to the angular-cli.json to list of global scripts(add "../node_modules/lodash/lodash.js" to the list apps[0].scripts).

and in your component where you want to use , try this way

declare var _:any;

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

before : angular-cli (1.0.0-beta.15):

add this line in src/index.html

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

and in your component where you want to use , try this way

declare var _:any;

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

I tried straight away , it worked for me

Answer 4

As of 4/15/2017 with @angular/cli 1.0.0:

You need to be very specific about which versions you install otherwise the TypeScript bindings will give all sorts of failures. What I did is update my devDependencies as follows in package.json:

"@types/lodash": "ts2.0"

Answer 5

With the stable release and current angular-cli (1.0.0-beta.15), it's simply adding the npm package plus type definitions

npm install lodash --save
npm install @types/lodash --save-dev

For early versions such as 1.0.0-beta.15, the next is necessary. It should not be required for current versions:

Add the library to the angular-cli.json to list of global scripts (add "../node_modules/lodash/lodash.js" to the list apps[0].scripts).

See https://github.com/angular/angular-cli#global-library-installation